@iqual/nuxt-icms 1.0.2

package/components/Form/TextEmailInput.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { TextEmailInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: TextEmailInput }>()
+
+const { cleanDescription, getValidationData } = useFormElement(
+  props.formElement,
+)
+
+const inputValue = ref<string | undefined>(undefined)
+const isFocused = ref<boolean>(false)
+</script>
+
+<template>
+  <FormKit
+    type="email"
+    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>

package/components/Form/TextInput.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { TextInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: TextInput }>()
+
+const { cleanDescription, getValidationData } = useFormElement(
+  props.formElement,
+)
+
+const inputValue = ref<string | undefined>(undefined)
+const isFocused = ref<boolean>(false)
+</script>
+
+<template>
+  <FormKit
+    type="text"
+    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>

package/components/Form/TextPhoneInput.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { TextPhoneInput } from './utils/types'
+import { useFormElement } from './composables/useFormElement'
+
+const props = defineProps<{ formElement: TextPhoneInput }>()
+
+const { cleanDescription, getValidationData } = useFormElement(
+  props.formElement,
+)
+
+const inputValue = ref<string | undefined>(undefined)
+const isFocused = ref<boolean>(false)
+</script>
+
+<template>
+  <FormKit
+    type="tel"
+    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>

package/components/Form/WebformMarkup.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { WebformMarkup } from './utils/types'
+
+defineProps<{ formElement: WebformMarkup }>()
+</script>
+
+<template>
+  <div v-html="formElement.markup" class="mb-4"></div>
+</template>

package/components/Form/composables/useFormElement.ts

@@ -0,0 +1,84 @@
+import type { FormElement, TextInput, SelectInput, InputOption, CheckboxInputs, CheckboxInput, FileUploadInput } from '../utils/types'
+
+export function useFormElement(formElement: FormElement) {
+  const { $texts } = useNuxtApp()
+  const cleanDescription = computed(() => {
+    if (!formElement.description) return ''
+
+    return formElement.description.replace(/<[^>]*>/g, '')
+  });
+
+  const getValidationData = computed(() => {
+    const rules: string[] = []
+    const messages: Record<string, string> = {}
+
+    if (formElement?.required) {
+      rules.push('required')
+      messages['required'] = formElement.required.message || $texts(
+        'webform.required_field_error',
+        'This field is required.',
+      )
+    }
+
+    const checkboxInput = formElement as CheckboxInput;
+    if (checkboxInput?.type === 'checkbox' && checkboxInput?.required) {
+      rules.push('accepted')
+    }
+
+    const textInput = formElement as TextInput;
+    if (textInput.minlength && textInput.maxlength) {
+      rules.push(`length:${textInput.minlength},${textInput.maxlength}`)
+    } else if (textInput.maxlength) {
+      rules.push(`length:0,${textInput.maxlength}`)
+    }
+
+    if (textInput.pattern?.rule) {
+      rules.push(`matches:${textInput.pattern.rule}`)
+      messages['matches'] = textInput.pattern.message
+    }
+
+    // Return only if there are validation rules
+    return {
+      rules: rules.length ? rules.join('|') : undefined,
+      messages: Object.keys(messages).length ? messages : undefined
+    }
+  })
+
+  const getFormattedOptions = computed(() => {
+    if (!(formElement as SelectInput | CheckboxInputs).options) return []
+
+    return (formElement as SelectInput | CheckboxInputs).options.map((option: InputOption) => ({
+      label: option.title,
+      value: option.value,
+    }))
+  })
+
+  const getFormattedFileExtensions = computed(() => {
+    if (!(formElement as FileUploadInput).fileExtensions) return ''
+
+    return (formElement as FileUploadInput).fileExtensions
+      .split(' ')
+      .map((ext: string) => { return '.' + ext })
+      .join(', ')
+  })
+
+  function validateFileExtensions(value: File | File[], element: FileUploadInput): boolean {
+    if (!element.fileExtensions) return true
+
+    const allowedExtensions = element.fileExtensions.split(' ')
+    const files = Array.isArray(value) ? value : [value]
+
+    return files.every((file) => {
+      const fileExtension = file.name.split('.').pop()
+      return allowedExtensions.includes(fileExtension || '')
+    })
+  }
+
+  return {
+    cleanDescription,
+    getValidationData,
+    getFormattedOptions,
+    getFormattedFileExtensions,
+    validateFileExtensions
+  }
+}

package/components/Form/utils/types.ts

@@ -0,0 +1,64 @@
+export type FormKitTypes = 'text' | 'number' | 'meta' | 'url' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'form' | 'group' | 'hidden' | 'list' | 'month' | 'password'
+
+export interface FormElement {
+  key: string
+  type: string
+  title: string
+  description?: string
+  multiple?: number
+  required?: {
+    message?: string
+  }
+}
+
+export type InputOption = {
+  title: string
+  value: string
+}
+
+export interface TextInput extends FormElement {
+  size: number
+  minlength?: number
+  maxlength: number
+  placeholder?: string
+  pattern: {
+    message: string
+    rule: string
+  }
+}
+
+export interface TextAreaInput extends TextInput {
+  rows: number
+}
+
+export interface TextEmailInput extends TextInput { }
+
+export interface TextPhoneInput extends TextInput { }
+
+export interface SelectInput extends FormElement {
+  emptyOption: InputOption
+  options: InputOption[]
+}
+
+export interface CheckboxInput extends FormElement { }
+
+export interface CheckboxInputs extends FormElement {
+  options: InputOption[]
+}
+
+export interface RadioButtonsInput extends FormElement {
+  options: InputOption[]
+}
+
+export interface FileUploadInput extends FormElement {
+  fileExtensions: string
+  maxFileSize: number
+}
+
+export interface WebformMarkup extends FormElement {
+  markup: string
+}
+
+export interface SubmitButton extends FormElement {
+  submitLabel?: string
+}

package/components/Media/Icon/fragment.mediaIcon.graphql

@@ -0,0 +1,9 @@
+fragment mediaIcon on MediaIcon {
+  url: mediaFileUrl {
+    path
+  }
+  title: name
+  alt: fieldMediaSvg {
+    alt
+  }
+}

package/components/Media/Icon/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <img 
+    :src="media?.url?.path" 
+    :alt="media?.alt?.alt" 
+    :title="media?.title" 
+    :class="mediaClass"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { MediaIconFragment } from '#graphql-operations'
+const props = defineProps<{
+  media: MediaIconFragment
+  mediaClass?: string
+}>()
+</script>

package/components/Media/Image/fragment.graphql

@@ -0,0 +1,11 @@
+fragment mediaImage on MediaImage {
+  id
+  alt: fieldMediaImage {
+    alt
+  }
+  title: name
+  sourceUrl: mediaFileUrl {
+    path
+  }
+  caption: fieldCaption
+}

package/components/Media/Image/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <picture :class="mediaClass">
+    <img v-if="imageSources.length === 1" 
+      :class="elementClass"
+      :srcset="imageSources[0].srcset" 
+      :sizes="imageSources[0].sizes" 
+      :alt="media?.alt?.alt" 
+      :title="media?.title"
+      :src="placeHolderImage"
+      :loading="imageLoading"
+    />
+    <source v-if="imageSources.length > 1" v-for="(source, key) in imageSources" :key="key"
+      :srcset="source.srcset"
+      :media="source.media" 
+    />
+    <img v-if="imageSources.length > 1"
+      :src="placeHolderImage" 
+      :alt="media?.alt?.alt" 
+      :title="media?.title"
+      :class="elementClass"
+      :loading="imageLoading"
+    />
+
+    <figcaption v-if="showCaption && media?.caption" 
+      v-text="media?.caption" 
+      :class="figcaptionClass" />
+  </picture>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { checkDensities, parseDensities, parseSize, parseSizes } from '/node_modules/@nuxt/image/dist/runtime/utils'
+import type { ImageOptions, ImageSizesOptions, CreateImageOptions, ResolvedImage, ImageCTX, $Img, ImageSizes, ImageSizesVariant } from '/node_modules/@nuxt/image/dist/runtime/types'
+import type { MediaImageFragment } from '#graphql-operations'
+
+const props = withDefaults(
+  defineProps<{
+    media: MediaImageFragment
+    mediaClass?: string
+    imageAspectRatios?: string
+    imageSizes?: string
+    imageLoading?: "lazy" | "eager" | undefined
+    showCaption?: boolean
+    figcaptionClass?: string
+    elementClass?: string
+  }>(),
+  {
+    imageLoading: 'lazy',
+    figcaptionClass: 'pt-1 text-center',
+    elementClass: 'size-full object-cover object-center',
+  },
+)
+
+// Get the data.
+const img = useImage()
+const baseUrl = useRuntimeConfig().public.imageBaseUrl
+const sourceImage = baseUrl + props?.media?.sourceUrl?.path
+
+const placeHolderImage = computed(() => {
+  return img(sourceImage, {format: 'webp', width: 100, blur: 100})
+})
+
+const imageSources = computed(() => {
+  const sources = []
+  const imgSizes = props.imageSizes ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ');
+
+  // No aspect ratios provided.
+  if (!props?.imageAspectRatios) {
+    sources.push(img.getSizes(sourceImage, {
+      sizes: imgSizes,
+      modifiers: {
+        format: 'webp'
+      }
+    }));
+    return sources
+  }
+
+  // Aspect ratios provided.
+  const parsedAspectRatios = parseSizes(props?.imageAspectRatios)
+  const parsedImageSizes = parseSizes(imgSizes)
+  const densities = img.options.densities
+  const keys = Object.keys(parsedImageSizes);
+  const lastKey = keys[keys.length - 1];
+
+  for (const keyAspectRatios in parsedAspectRatios) {
+    const [l, h]  = parsedAspectRatios[keyAspectRatios].split('/').map(Number);
+    const hwRatio = (l && h) ? h / l : 0
+    const sizeVariants = []
+    const srcsetVariants = [] 
+
+    let screenSizes = Object.keys(parsedImageSizes)
+    if (Object.keys(parsedImageSizes).includes(keyAspectRatios)) {
+      const minSizeIndex = Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
+      screenSizes = Object.keys(parsedImageSizes).slice(minSizeIndex)
+    }
+
+    for (const index in screenSizes) {
+      const screenSize = screenSizes[index]
+
+      const variant = getSizesVariant(screenSize, String(parsedImageSizes[screenSize]), hwRatio)
+      if (variant === undefined) {
+        continue
+      }
+
+      // Add size variant with 'media'.
+      sizeVariants.push({
+        size: variant.size,
+        screenMaxWidth: variant.screenMaxWidth,
+        media: `(max-width: ${variant.screenMaxWidth}px)`,
+      })
+
+      // Add srcset variants and ignore densities (for current 'size' processed).
+      srcsetVariants.push({
+        width: variant._cWidth,
+        src: img(sourceImage, {
+          width: variant._cWidth ? variant._cWidth : undefined,
+          height: variant._cHeight ? variant._cHeight : undefined,
+          fit: 'cover',
+          format: 'webp'
+        }),
+      })
+
+      // Make sure to not create duplicate size variants for the same screen size.
+      if (keyAspectRatios != screenSize && Object.keys(parsedAspectRatios).includes(screenSize)) {
+        break
+      }
+    }
+
+    const media = sizeVariants.slice(-1)[0]?.media
+    finaliseSizeVariants(sizeVariants)
+    finaliseSrcsetVariants(srcsetVariants)
+
+    const sizesVal = sizeVariants.length ? sizeVariants.map(v => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ') : undefined
+    const suffix = sizesVal ? 'w' : 'x'
+    const srcsetVal = srcsetVariants.map(v => `${v.src} ${v.width}${suffix}`).join(', ')
+
+    let source = {
+      sizes: sizesVal,
+      srcset: srcsetVal,
+    }
+
+    if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
+      source.media = media
+    }
+    sources.push(source)
+  }
+  return sources
+})
+
+// Helper function, copied from NuxtImage.
+function getSizesVariant(key: string, size: string, hwRatio: number): ImageSizesVariant | undefined {
+  const screenMaxWidth = (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
+  const isFluid = size.endsWith('vw')
+  if (!isFluid && /^\d+$/.test(size)) {
+    size = size + 'px'
+  }
+  if (!isFluid && !size.endsWith('px')) {
+    return undefined
+  }
+  let _cWidth = Number.parseInt(size)
+  if (!screenMaxWidth || !_cWidth) {
+    return undefined
+  }
+  if (isFluid) {
+    _cWidth = Math.round((_cWidth / 100) * screenMaxWidth)
+  }
+  const _cHeight = Math.round(_cWidth * hwRatio)
+  return {
+    size,
+    screenMaxWidth,
+    _cWidth,
+    _cHeight,
+  }
+}
+
+// Helper function, copied from NuxtImage.
+function finaliseSizeVariants(sizeVariants: any[]) {
+  sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)
+
+  // de-duplicate size variants (by key `media`)
+  let previousMedia = null
+  for (let i = sizeVariants.length - 1; i >= 0; i--) {
+    const sizeVariant = sizeVariants[i]
+    if (sizeVariant.media === previousMedia) {
+      sizeVariants.splice(i, 1)
+    }
+    previousMedia = sizeVariant.media
+  }
+
+  for (let i = 0; i < sizeVariants.length; i++) {
+    sizeVariants[i].media = sizeVariants[i + 1]?.media || ''
+  }
+}
+
+// Helper function, copied from NuxtImage.
+function finaliseSrcsetVariants(srcsetVariants: any[]) {
+  // sort by width
+  srcsetVariants.sort((v1, v2) => v1.width - v2.width)
+
+  // de-duplicate srcset variants (by key `width`)
+  let previousWidth = null
+  for (let i = srcsetVariants.length - 1; i >= 0; i--) {
+    const sizeVariant = srcsetVariants[i]
+    if (sizeVariant.width === previousWidth) {
+      srcsetVariants.splice(i, 1)
+    }
+    previousWidth = sizeVariant.width
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/components/Media/RemoteVideo/fragment.graphql

@@ -0,0 +1,27 @@
+fragment mediaRemoteVideo on MediaRemoteVideo {
+  link: fieldMediaOembedVideo
+  title: name
+  thumbnailOverride: fieldThumbnailCustom {
+    entity {
+      __typename
+      uri: uriRawField {
+        first {
+          url
+        }
+      }
+    }
+    alt
+  }
+  thumbnail: thumbnail {
+    entity {
+      __typename
+      uri: uriRawField {
+        first {
+          url
+        }
+      }
+    }
+    alt
+  }
+  caption: fieldCaption
+}

package/components/Media/RemoteVideo/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <VuepalRemoteVideo v-slot="{ embedUrl }" :url="media?.link">
+    <figure class="w-full max-w-[1920px]" :class="mediaClass">
+      <iframe
+        v-if="embedUrl && isPlaying"
+        :src="embedUrl"
+        :title="media?.title"
+        allow="autoplay; encrypted-media; picture-in-picture"
+        allowfullscreen
+        class="aspect-video w-full md:px-40 lg:px-0"
+        :class="elementClass"
+      />
+
+      <button
+        v-if="!isPlaying"
+        class="relative flex aspect-video w-full cursor-pointer items-center justify-center md:px-40 lg:px-0"
+        @click.prevent="isPlaying = true"
+      >
+        <img
+          :src="thumbnailUrl"
+          class="absolute left-0 top-0 size-full object-cover aspect-video"
+          :class="elementClass"
+          :alt="thumbnailAlt"
+        />
+
+        <SpriteSymbol name="play" class="z-10 size-[75px]" />
+      </button>
+
+      <figcaption v-if="showCaption && media?.caption" 
+        v-text="media?.caption" 
+        :class="figcaptionClass" />
+    </figure>
+  </VuepalRemoteVideo>
+</template>
+
+<script lang="ts" setup>
+import type { MediaRemoteVideoFragment } from '#graphql-operations'
+
+const props = defineProps<{
+  media: MediaRemoteVideoFragment
+  mediaClass?: string
+  elementClass?: string
+  showCaption?: boolean
+  figcaptionClass?: string
+}>()
+
+const isPlaying = ref(false)
+
+const thumbnailUrl = computed(() => {
+  const file = props.media?.thumbnailOverride || props.media?.thumbnail
+  return file?.entity?.uri?.first?.url
+})
+
+const thumbnailAlt = computed(() => {
+  const file = props.media?.thumbnailOverride || props.media?.thumbnail
+  return file?.alt
+})
+</script>

package/components/Media/Video/fragment.graphql

@@ -0,0 +1,17 @@
+fragment mediaVideo on MediaVideo {
+  url: mediaFileUrl {
+    path
+  }
+  thumbnail: fieldThumbnailCustom {
+    entity {
+      __typename
+      uri: uriRawField {
+        first {
+          url
+        }
+      }
+    }
+    alt
+  }
+  caption: fieldCaption
+}

package/components/Media/Video/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <figure :class="mediaClass">
+    <video
+      :controls="videoControls"
+      :muted="videoMuted"
+      :autoplay="videoAutoplay"
+      :loop="videoLoop"
+      :poster="media?.thumbnail?.entity?.uri?.first?.url"
+      class="w-full"
+      :class="elementClass"
+    >
+      <source v-if="media?.url?.path" :src="media.url.path" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+    <figcaption v-if="showCaption && media?.caption" 
+    v-text="media?.caption" 
+    :class="figcaptionClass" />
+  </figure>
+</template>
+
+<script lang="ts" setup>
+
+import type { MediaVideoFragment } from '#graphql-operations'
+
+withDefaults(
+  defineProps<{
+    media: MediaVideoFragment
+    showCaption?: boolean
+    mediaClass?: string
+    figcaptionClass?: string
+    videoControls?: boolean
+    videoMuted?: boolean
+    videoAutoplay?: boolean
+    videoLoop?: boolean
+    elementClass?: string
+  }>(),
+  {
+    videoControls: true,
+    videoMuted: true,
+    videoAutoplay: true,
+    videoLoop: false,
+  },
+)
+</script>

package/components/Media/fragment.graphql

@@ -0,0 +1,8 @@
+fragment media on Media {
+  type: __typename
+  title: name
+  ...mediaImage
+  ...mediaIcon
+  ...mediaVideo
+  ...mediaRemoteVideo
+}