@iqual/nuxt-icms 1.0.2

package/components/Drupal/Breadcrumb/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="container mb-[30px] h-6 pt-20">
+    <section v-if="links.length" class="relative mobile-only:overflow-hidden">
+      <nav class="breadcrumb" aria-label="breadcrumbs">
+        <ol
+          ref="list"
+          itemscope
+          itemtype="http://schema.org/BreadcrumbList"
+          class="flex items-center whitespace-nowrap"
+        >
+          <li
+            v-for="(link, index) in linksComputed"
+            :key="index"
+            itemprop="itemListElement"
+            itemscope
+            itemtype="http://schema.org/ListItem"
+          >
+            <component :is="link.tag" v-bind="link.props" itemprop="item">
+              <span itemprop="name">
+                {{ link.title }}
+              </span>
+            </component>
+            <meta itemprop="position" :content="`${index + 2}`" />
+          </li>
+        </ol>
+      </nav>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { BreadcrumbFragment } from '#graphql-operations'
+import type { Langcode } from '#nuxt-language-negotiation/config'
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+  links: BreadcrumbFragment[]
+  language?: Langcode
+}>()
+
+const list = ref<HTMLOListElement | null>(null)
+
+const linksComputed = computed(() => {
+  return props.links.map((link) => {
+    const { title, url } = link
+    const to = url?.path
+    return {
+      tag: to ? NuxtLink : 'span',
+      props: to ? { to } : {},
+      title,
+    }
+  })
+})
+
+watch(linksComputed, () => {
+  nextTick(() => {
+    if (list.value && window.innerWidth < 768) {
+      list.value.querySelector('li:last-child')?.scrollIntoView()
+    }
+  })
+})
+</script>
+
+<style lang="postcss">
+.breadcrumb {
+  li {
+    @apply h-6 text-gray-900/60;
+    &:not(:first-child):before {
+      content: '›';
+      @apply me-4 ms-4 text-2xl;
+      line-height: 0;
+    }
+  }
+
+  a {
+    @apply text-gray-900/60 hover:text-gray-700;
+  }
+}
+.breadcrumb-slide-enter-active,
+.breadcrumb-slide-leave-active {
+  transition: all 0.4s;
+}
+.breadcrumb-slide-enter-from,
+.breadcrumb-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-90%);
+}
+</style>

package/components/Drupal/Messages/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-if="messages.length"
+    class="fixed bottom-0 left-0 z-[9999999] w-full text-white"
+  >
+    <div
+      v-for="(message, i) in messages"
+      :key="i"
+      class="flex items-center justify-between rounded p-6 font-medium"
+      :class="classes[message.type]"
+      @click="removeMessage(i)"
+    >
+      <div v-html="message.message" />
+      <SpriteSymbol name="close" class="size-6" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DrupalMessageType } from '@iqual/nuxt-icms/composables/useDrupalMessages'
+
+const { messages, removeMessage } = useDrupalMessages()
+
+const classes: Record<DrupalMessageType, string> = {
+  error: 'bg-error-100 text-error-800',
+  warning: 'bg-warning-100 text-warning-800',
+  status: 'bg-success-100 text-success-800',
+}
+</script>

package/components/Drupal/Webform/fragment.graphql

@@ -0,0 +1,86 @@
+fragment webformElementMetadata on WebformElement {
+  key
+  type
+  title
+  description
+  multiple
+  required {
+    message
+  }
+}
+
+fragment webformElementActions on WebformElementWebformActions {
+  submitLabel
+}
+
+fragment webformElementTextBase on WebformElementTextBase {
+  size
+  minlength
+  maxlength
+  placeholder
+  pattern {
+    message
+    rule
+  }
+}
+
+fragment webformElementMarkupBase on WebformElementMarkupBase {
+  markup
+}
+
+fragment webformElementTextarea on WebformElementTextarea {
+  rows
+}
+
+fragment webformElementSelect on WebformElementSelect {
+  emptyOption {
+    title
+    value
+  }
+  options {
+    value
+    title
+  }
+}
+
+fragment webformElementManagedFile on WebformElementManagedFile {
+  fileExtensions
+  maxFilesize
+}
+
+fragment webformElementRadions on WebformElementRadios {
+  options {
+    title
+    value
+  }
+}
+
+fragment webformElementTermSelect on WebformElementWebformTermSelect {
+  options(depth: 1) {
+    value
+    title
+  }
+}
+
+fragment webformElementCheckboxes on WebformElementCheckboxes {
+  options {
+    title
+    value
+  }
+}
+
+fragment webformElementWebformFlexbox on WebformElementWebformFlexbox {
+  elements {
+    __typename
+    ...webformElementMetadata
+    ...webformElementActions
+    ...webformElementTextBase
+    ...webformElementMarkupBase
+    ...webformElementTextarea
+    ...webformElementSelect
+    ...webformElementManagedFile
+    ...webformElementTermSelect
+    ...webformElementRadions
+    ...webformElementCheckboxes
+  }
+}

package/components/Drupal/Webform/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <Transition name="fade">
+      <div v-if="!submitted && !showThankYou && !showError">
+        <FormKit
+          type="form"
+          :actions="false"
+          :messages-class="'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.key"
+          >
+
+            <NuxtTurnstile
+              v-model="token"
+              v-if="formElement.key === 'actions'"
+            />
+
+            <component
+              :is="getComponent(formElement.type)"
+              :formElement="formElement"
+            />
+          </div>
+        </FormKit>
+      </div>
+    </Transition>
+
+    <Transition name="fade">
+      <div
+        v-if="showThankYou"
+        class="mb-4 rounded-lg border border-success-500 px-6 py-4 text-success-500"
+      >
+        <p>
+          {{
+            $texts(
+              'webform.submission_success',
+              'Thank you for submitting the webform.',
+            )
+          }}
+        </p>
+      </div>
+    </Transition>
+
+    <Transition name="fade">
+      <div
+        v-if="showError"
+        class="mb-4 rounded-lg border border-error-500 px-6 py-4 text-error-500"
+      >
+        <p>
+          {{
+            $texts(
+              'webform.submission_error',
+              'There was an error submitting the webform. Please try again.',
+            )
+          }}
+        </p>
+      </div>
+    </Transition>
+  </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'
+
+interface FormData {
+  [fieldName: string]:
+    | string
+    | number
+    | boolean
+    | File
+    | string[]
+    | null
+    | undefined
+}
+
+const props = defineProps<{
+  formId: string
+}>()
+
+const { $texts } = useNuxtApp()
+
+const submitted = ref(false)
+const showThankYou = ref(false)
+const showError = ref(false)
+
+const queryKey = `drupalWebform-${props?.formId || '0'}`;
+const { data: formDefinition } = await useAsyncData(queryKey, async () => {
+    return await useGraphqlQuery('webformById', { id: props?.formId }).then(
+      (v) => v?.data?.entityById || { elements: [] }
+    )
+  })
+
+async function submitWebform(data: FormData) {
+  try {
+    const elements = Object.keys(data)
+      .filter(
+        (key) =>
+          data[key] !== undefined && data[key] !== null && data[key] !== '',
+      )
+      .map((key) => ({
+        element: key,
+        value: data[key],
+      }))
+
+    const response = await useGraphqlMutation('submitWebform', {
+      id: props?.formId,
+      elements,
+    })
+
+    // response.data?.submitWebform?.errors?.length or response.errors.length?
+    if (response.data?.submitWebform?.errors?.length) {
+      throw new Error()
+    }
+
+    submitted.value = true
+
+    setTimeout(() => {
+      showThankYou.value = true
+    }, 500)
+  } catch (err) {
+    showError.value = true
+  }
+}
+
+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,
+  }
+  return components[type] || TextInput
+}
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity duration-500 ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+</style>

package/components/Drupal/Webform/mutation.graphql

@@ -0,0 +1,8 @@
+mutation submitWebform($id: String!, $elements: [WebformSubmissionElement]) {
+  submitWebform(id: $id, elements: $elements) {
+    errors
+    submission {
+      id
+    }
+  }
+}

package/components/Drupal/Webform/query.graphql

@@ -0,0 +1,21 @@
+query webformById($id: ID!) {
+  entityById(id: $id, entityType: WEBFORM) {
+    ... on Webform {
+      label
+      id
+      elements {
+        ...webformElementMetadata
+        ...webformElementActions
+        ...webformElementTextBase
+        ...webformElementMarkupBase
+        ...webformElementTextarea
+        ...webformElementSelect
+        ...webformElementManagedFile
+        ...webformElementTermSelect
+        ...webformElementWebformFlexbox
+        ...webformElementRadions
+        ...webformElementCheckboxes
+      }
+    }
+  }
+}

package/components/Form/CheckboxInput.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { CheckboxInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: CheckboxInput }>()
+
+const { cleanDescription, getValidationData } = useFormElement(
+  props.formElement,
+)
+</script>
+
+<template>
+  <FormKit
+    type="checkbox"
+    :name="formElement.key"
+    :label="formElement.title"
+    :help="cleanDescription"
+    :validation="getValidationData.rules || ''"
+    :validationMessages="getValidationData.messages || {}"
+  >
+    <template #wrapper="{ node, value }">
+      <div class="flex items-center gap-2">
+        <Checkbox
+          :id="formElement.key"
+          :checked="value"
+          @update:checked="node.input($event)"
+          class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+        />
+        <Label :for="formElement.key" class="text-base font-normal">
+          {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        </Label>
+      </div>
+    </template>
+  </FormKit>
+</template>

package/components/Form/CheckboxInputs.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { CheckboxInputs } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: CheckboxInputs }>()
+
+const { cleanDescription, getValidationData, getFormattedOptions } =
+  useFormElement(props.formElement)
+</script>
+
+<template>
+  <FormKit
+    type="checkbox"
+    :name="formElement.key"
+    :help="cleanDescription"
+    :validation="getValidationData.rules || ''"
+    :validationMessages="getValidationData.messages || {}"
+  >
+    <template #wrapper>
+      <Label class="mb-2 block text-base font-normal">
+        {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+      </Label>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(option, index) in getFormattedOptions"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <Checkbox
+            :value="option.value"
+            :id="`${formElement.key}-${index}`"
+            class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+          />
+          <Label
+            :for="`${formElement.key}-${index}`"
+            class="text-base font-normal"
+          >
+            {{ option.label }}
+          </Label>
+        </div>
+      </div>
+    </template>
+  </FormKit>
+</template>

package/components/Form/FileUploadInput.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { FileUploadInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: FileUploadInput }>()
+
+const { cleanDescription, getValidationData, getFormattedFileExtensions } =
+  useFormElement(props.formElement)
+</script>
+
+<template>
+  <FormKit
+    type="file"
+    :name="formElement?.key"
+    :accept="getFormattedFileExtensions"
+    :help="cleanDescription"
+    :multiple="Boolean(formElement.multiple)"
+    :validation="getValidationData.rules || ''"
+    :validationMessages="getValidationData.messages || {}"
+  >
+    <template #wrapper>
+      <div class="grid w-full items-center">
+        <Label :for="formElement?.key" class="mb-2 block text-base font-normal">
+          {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        </Label>
+        <Input
+          :id="formElement?.key"
+          type="file"
+          class="h-auto cursor-pointer rounded-lg border-gray-200 bg-white px-6 py-4 text-base font-normal shadow-custom-small !ring-offset-0 transition-all file:mr-6 file:cursor-pointer file:rounded file:bg-primary file:px-4 file:py-2 file:text-base file:font-bold file:text-white placeholder:text-gray-300 focus-visible:ring-primary-500 dark:border-gray-200 dark:bg-white dark:placeholder:text-gray-300 dark:focus-visible:ring-primary-500"
+        />
+      </div>
+    </template>
+  </FormKit>
+</template>

package/components/Form/RadioButtonsInput.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { RadioButtonsInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: RadioButtonsInput }>()
+
+const { cleanDescription, getValidationData, getFormattedOptions } =
+  useFormElement(props.formElement)
+</script>
+
+<template>
+  <FormKit
+    type="radio"
+    :name="formElement.key"
+    :help="cleanDescription"
+    :validation="getValidationData.rules || ''"
+    :validationMessages="getValidationData.messages || {}"
+  >
+    <template #wrapper>
+      <Label class="mb-2 block text-base font-normal">
+        {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+      </Label>
+      <RadioGroup>
+        <div
+          v-for="(option, index) in getFormattedOptions"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <RadioGroupItem
+            :id="`${formElement.key}-${index}`"
+            :value="option.value"
+            class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+          />
+          <Label
+            :for="`${formElement.key}-${index}`"
+            class="text-base font-normal"
+          >
+            {{ option.label }}
+          </Label>
+        </div>
+      </RadioGroup>
+    </template>
+  </FormKit>
+</template>

package/components/Form/SelectInput.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { SelectInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: SelectInput }>()
+
+const { cleanDescription, getValidationData, getFormattedOptions } =
+  useFormElement(props.formElement)
+</script>
+
+<template>
+  <FormKit
+    type="select"
+    :name="formElement.key"
+    :label="formElement.title"
+    :help="cleanDescription"
+    :validation="getValidationData.rules"
+    :validationMessages="getValidationData.messages"
+    :multiple="Boolean(formElement.multiple)"
+  >
+    <template #wrapper="{ value, node }">
+      <Select
+        :model-value="value as string | undefined"
+        @update:model-value="node.input"
+      >
+        <SelectTrigger
+          class="[&[data-state=open]>svg]:transition-200 h-auto border-1 border-gray-200 bg-white px-6 py-4 shadow-custom-small focus:outline-none focus:ring-primary-500 focus:ring-offset-0 dark:border-gray-200 dark:bg-white dark:focus:outline-none dark:focus:ring-primary-500 dark:focus:ring-offset-0 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg]:transition-all"
+        >
+          <SelectValue
+            :placeholder="`${formElement.title}${formElement.required ? '*' : ''}`"
+            class="text-medium text-base text-black"
+          >
+            {{
+              value || `${formElement.title}${formElement.required ? '*' : ''}`
+            }}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent
+          class="border-1 border-gray-200 bg-white !shadow-custom-small dark:border-gray-200 dark:bg-white [&>div]:!px-0 [&>div]:!py-1"
+        >
+          <SelectItem
+            v-for="(option, index) in getFormattedOptions"
+            :key="index"
+            :value="option.value"
+            class="cursor-pointer bg-white py-2 text-base text-black hover:bg-gray-50 hover:text-black focus:bg-gray-50 focus:text-black dark:bg-white dark:text-black dark:hover:bg-gray-50 dark:hover:text-black dark:focus:bg-gray-50 dark:focus:text-black"
+            @click="node.input(option.value)"
+          >
+            {{ option.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </template>
+  </FormKit>
+</template>

package/components/Form/SubmitButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SubmitButton } from './utils/types'
+
+defineProps<{ formElement: SubmitButton }>()
+</script>
+
+<template>
+  <FormKit
+    type="submit"
+    :label="formElement?.submitLabel || formElement?.title"
+  />
+</template>

package/components/Form/TextAreaInput.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { TextAreaInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: TextAreaInput }>()
+
+const { cleanDescription, getValidationData } = useFormElement(
+  props.formElement,
+)
+const inputValue = ref<string | undefined>(undefined)
+const isFocused = ref<boolean>(false)
+</script>
+
+<template>
+  <FormKit
+    type="textarea"
+    v-model="inputValue"
+    :name="formElement?.key"
+    :label="formElement?.title"
+    :help="cleanDescription"
+    :placeholder="isFocused && !inputValue ? formElement?.placeholder : ''"
+    :validation="getValidationData.rules"
+    :validationMessages="getValidationData.messages"
+    :inputClass="{
+      'pt-6 pb-2': inputValue || isFocused,
+    }"
+    :labelClass="{
+      'top-4 text-base': !inputValue && !isFocused,
+      'top-2 text-xs': inputValue || isFocused,
+    }"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>