@iqual/nuxt-icms 1.4.10 → 1.5.1

package/components/Form/TextPhoneInput.vue

@@ -1,35 +1,190 @@
 <script lang="ts" setup>
-import type { TextPhoneInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { TextInputProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
+import { useFormDefaultValue } from '@iqual/nuxt-icms/components/Form/composables/useFormDefaultValue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
-const props = defineProps<{ formElement: TextPhoneInput }>()
+const props = defineProps<{ formElement: TextInputProps; debug: boolean }>()
+const model = defineModel<string | number>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormTextPhoneInput')
 
-const { cleanDescription, getValidationData } = useFormElement(
-  props.formElement,
-)
+const { cleanDescription } = useFormElement(props.formElement)
 
-const inputValue = ref<string | undefined>(undefined)
-const isFocused = ref<boolean>(false)
+if (props.debug)
+  console.log(
+    `[${props.formElement.metadata.title} (${props.formElement.metadata.key})] Props:`,
+    props,
+  )
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+const floatingLabels = inject<boolean>('floatingLabels', true)
+
+const formFieldLabel = tv({
+  base: themedClass('formFieldLabelBase', 'text-base font-medium'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldLabelVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'formFieldLabelVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'formFieldLabelVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'formFieldLabelVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const formFieldDescription = tv({
+  base: themedClass('formFieldDescriptionBase', 'text-sm'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'formFieldDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'formFieldDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'formFieldDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const inputBase = tv({
+  base: themedClass(
+    'inputBase',
+    'text-base py-3 px-4 rounded-none peer data-[floating=true]:pt-4 data-[floating=true]:pb-4 data-[floating=true]:placeholder-transparent',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'inputBaseVariantsColorSchemeNone',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+      ),
+      dark: themedClass(
+        'inputBaseVariantsColorSchemeDark',
+        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-400',
+      ),
+      light: themedClass(
+        'inputBaseVariantsColorSchemeLight',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+      ),
+      accent: themedClass(
+        'inputBaseVariantsColorSchemeAccent',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+      ),
+    },
+  },
+})
+
+const floatingLabel = tv({
+  base: themedClass(
+    'floatingLabelBase',
+    'pointer-events-none absolute left-1.5 -top-2 z-10 origin-left px-1 transition-all duration-200 text-xs font-medium peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-focus:-top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:font-medium',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'floatingLabelVariantsColorSchemeNone',
+        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+      ),
+      dark: themedClass(
+        'floatingLabelVariantsColorSchemeDark',
+        'text-gray-300 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-300 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+      ),
+      light: themedClass(
+        'floatingLabelVariantsColorSchemeLight',
+        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+      ),
+      accent: themedClass(
+        'floatingLabelVariantsColorSchemeAccent',
+        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+      ),
+    },
+  },
+})
+
+const floatingLabelText = tv({
+  base: themedClass(
+    'floatingLabelTextBase',
+    'inline-flex px-1.5 leading-none rounded-sm bg-default',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'floatingLabelTextVariantsColorSchemeNone',
+        'bg-white dark:bg-white',
+      ),
+      dark: themedClass(
+        'floatingLabelTextVariantsColorSchemeDark',
+        'bg-gray-800 dark:bg-gray-800',
+      ),
+      light: themedClass(
+        'floatingLabelTextVariantsColorSchemeLight',
+        'bg-white dark:bg-white',
+      ),
+      accent: themedClass(
+        'floatingLabelTextVariantsColorSchemeAccent',
+        'bg-white dark:bg-white',
+      ),
+    },
+  },
+})
 </script>
 
 <template>
-  <FormKit
-    type="tel"
-    v-model="inputValue"
-    :name="formElement?.metadata?.key"
-    :label="formElement?.metadata?.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,
+  <UFormField
+    :name="formElement.metadata.key"
+    :label="floatingLabels ? undefined : formElement.metadata.title"
+    :required="formElement.metadata.required"
+    :description="floatingLabels ? undefined : cleanDescription"
+    :help="floatingLabels ? cleanDescription : undefined"
+    :ui="{
+      label: formFieldLabel({ colorScheme }),
+      help: formFieldDescription({ colorScheme }),
+      description: formFieldDescription({ colorScheme }),
     }"
-    @focus="isFocused = true"
-    @blur="isFocused = false"
-  />
+  >
+    <UInput
+      v-model="model"
+      :id="formElement.metadata.key"
+      :type="formElement.metadata.type"
+      :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+      :maxlength="formElement.maxlength"
+      :minlength="formElement.minlength"
+      :pattern="formElement.pattern?.rule"
+      :data-floating="floatingLabels"
+      :ui="{
+        base: inputBase({ colorScheme }),
+      }"
+    >
+      <label
+        v-if="floatingLabels"
+        :class="floatingLabel({ colorScheme })"
+        :for="formElement.metadata.key"
+      >
+        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      </label>
+    </UInput>
+  </UFormField>
 </template>

package/components/Form/WebformMarkup.vue

@@ -1,9 +1,42 @@
 <script setup lang="ts">
-import type { WebformMarkup } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { MarkupProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
-defineProps<{ formElement: WebformMarkup }>()
+const props = defineProps<{ formElement: MarkupProps; debug: boolean }>()
+
+if (props.debug)
+  console.log(`[Markup (${props.formElement.metadata.key})] Props:`, props)
+
+const themedClass = useTheme('FormWebformMarkup')
+const colorScheme = inject<ColorScheme>('colorScheme')
+
+const markupText = tv({
+  base: themedClass('markupTextBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'markupTextVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'markupTextVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'markupTextVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'markupTextVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
 </script>
 
 <template>
-  <div v-html="formElement.markup" class="mb-4"></div>
+  <div :class="markupText({ colorScheme })" v-html="formElement.markup"></div>
 </template>

package/components/Form/composables/useFormDefaultValue.ts

@@ -0,0 +1,37 @@
+type ModelRef<T> = {
+  value: T
+}
+
+function parseFormDefaultValue(rawDefaultValue?: string | null): unknown {
+  if (!rawDefaultValue)
+    return undefined
+
+  try {
+    return JSON.parse(rawDefaultValue)
+  }
+  catch {
+    return rawDefaultValue
+  }
+}
+
+function isEmptyModelValue(value: unknown): boolean {
+  return (
+    value === undefined
+    || value === null
+    || value === ''
+    || (Array.isArray(value) && value.length === 0)
+  )
+}
+
+export function useFormDefaultValue<T>(
+  model: ModelRef<T>,
+  rawDefaultValue?: string | null,
+): void {
+  const parsedDefaultValue = parseFormDefaultValue(rawDefaultValue)
+
+  if (parsedDefaultValue === undefined)
+    return
+
+  if (isEmptyModelValue(model.value))
+    model.value = parsedDefaultValue as T
+}

package/components/Form/composables/useFormElement.ts

@@ -1,84 +1,32 @@
-import type { FormElement, TextInput, SelectInput, InputOption, CheckboxInputs, CheckboxInput, FileUploadInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { MetadataFragment } from '#graphql-operations'
 
-export function useFormElement(formElement: FormElement) {
-  const { $texts } = useNuxtApp()
+export function useFormElement<T extends { metadata: MetadataFragment }>(formElement: T) {
   const cleanDescription = computed(() => {
-    if (!formElement?.metadata?.description) return ''
-
-    return formElement?.metadata?.description.replace(/<[^>]*>/g, '')
-  });
-
-  const getValidationData = computed(() => {
-    const rules: string[] = []
-    const messages: Record<string, string> = {}
-
-    if (formElement?.metadata?.required) {
-      rules.push('required')
-      messages['required'] = formElement?.metadata?.requiredError || $texts(
-        'webform.required_field_error',
-        'This field is required.',
-      )
-    }
-
-    const checkboxInput = formElement as CheckboxInput;
-    if (checkboxInput?.metadata?.type === 'checkbox' && checkboxInput?.metadata?.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
-    }
+    return formElement.metadata?.description?.replace(/<[^>]*>/g, '') ?? ''
   })
 
-  const getFormattedOptions = computed(() => {
-    if (!(formElement as SelectInput | CheckboxInputs).options) return []
+  const formattedOptions = computed(() => {
+    const el = formElement as any
+    const type = el.metadata?.type
 
-    return (formElement as SelectInput | CheckboxInputs).options.map((option: InputOption) => ({
-      label: option.title,
-      value: option.value,
-    }))
-  })
+    const options = (el.options || []).map((opt: any) => {
+      const option: any = {
+        label: opt.title,
+        value: opt.value,
+      }
 
-  const getFormattedFileExtensions = computed(() => {
-    if (!(formElement as FileUploadInput).fileExtensions) return ''
+      if ((type === 'checkboxes' || type === 'radios') && opt.description) {
+        option.description = opt.description
+      }
 
-    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 option
     })
-  }
+
+    return options
+  })
 
   return {
     cleanDescription,
-    getValidationData,
-    getFormattedOptions,
-    getFormattedFileExtensions,
-    validateFileExtensions
+    formattedOptions
   }
 }

package/components/Form/utils/types.ts

@@ -1,65 +1,69 @@
-export type FormKitTypes = 'text' | 'number' | 'meta' | 'url' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'form' | 'group' | 'hidden' | 'list' | 'month' | 'password'
+import type {
+  MetadataFragment,
+  WebformElementTextBaseFragment,
+  WebformElementTextareaFragment,
+  WebformElementSelectFragment,
+  WebformElementCheckboxesFragment,
+  WebformElementMarkupBaseFragment,
+  WebformElementManagedFileFragment,
+  WebformElementActionsFragment
+} from '#graphql-operations'
 
-export interface FormElement {
-  metadata: {
-    key: string
-    type: string
-    title: string
-    description?: string
-    multiple?: number
-    required?: boolean
-    requiredError?: string
-  }
-}
+type Metadata<T> = {
+  metadata: MetadataFragment
+} & T
 
-export type InputOption = {
-  title: string
-  value: string
-}
+export type TextInputProps = Metadata<WebformElementTextBaseFragment>
+export type TextareaInputProps = Metadata<WebformElementTextareaFragment>
+export type SelectProps = Metadata<WebformElementSelectFragment>
+export type CheckboxesProps = Metadata<WebformElementCheckboxesFragment>
+export type MarkupProps = Metadata<WebformElementMarkupBaseFragment>
+export type FileInputProps = Metadata<WebformElementManagedFileFragment>
+export type SubmitButtonProps = Metadata<WebformElementActionsFragment>
 
-export interface TextInput extends FormElement {
-  size: number
-  minlength?: number
-  maxlength: number
-  placeholder?: string
-  pattern: {
-    message: string
-    rule: string
-  }
+export interface WebformElementMetadata {
+  key?: string
+  type?: string
+  multiple?: boolean
+  required?: boolean
+  requiredError?: string
+  [key: string]: unknown
 }
 
-export interface TextAreaInput extends TextInput {
-  rows: number
+export interface WebformPatternRule {
+  rule?: string
+  message?: string
 }
 
-export interface TextEmailInput extends TextInput { }
-
-export interface TextPhoneInput extends TextInput { }
-
-export interface SelectInput extends FormElement {
-  emptyOption: InputOption
-  options: InputOption[]
+export interface WebformElement {
+  metadata?: WebformElementMetadata
+  minlength?: number
+  maxlength?: number
+  pattern?: WebformPatternRule
+  maxFilesize?: number
+  [key: string]: unknown
 }
 
-export interface CheckboxInput extends FormElement { }
-
-export interface CheckboxInputs extends FormElement {
-  options: InputOption[]
+export interface FormElementPreprocessorContext {
+  formElement: WebformElement
+  formId: string
 }
 
-export interface RadioButtonsInput extends FormElement {
-  options: InputOption[]
-}
+export type FormElementPreprocessor = (
+  context: FormElementPreprocessorContext,
+) => void | WebformElement
 
-export interface FileUploadInput extends FormElement {
-  fileExtensions: string
-  maxFileSize: number
+export interface SubmissionElement {
+  element: string
+  value: unknown
 }
 
-export interface WebformMarkup extends FormElement {
-  markup: string
+export interface SubmissionPreprocessorContext {
+  data: Record<string, unknown>
+  elements: SubmissionElement[]
+  formId: string
 }
 
-export interface SubmitButton extends FormElement {
-  submitLabel?: string
-}
+export type SubmissionPreprocessor = (
+  context: SubmissionPreprocessorContext,
+) => void | SubmissionElement[] | { elements?: SubmissionElement[] }

package/components/Media/Image/index.vue

@@ -2,8 +2,8 @@
   <picture :class="themedClass('mediaClass')">
     <img
       v-if="imageSources.length === 1"
-      :srcset="imageSources[0].srcset"
-      :sizes="imageSources[0].sizes"
+      :srcset="imageSources[0]?.srcset"
+      :sizes="imageSources[0]?.sizes"
       :alt="media?.alt?.alt"
       :title="media?.title"
       :src="placeHolderImage"
@@ -36,6 +36,7 @@
 <script lang="ts" setup>
 import type { MediaImageFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import type { ImageFormat } from '@iqual/nuxt-icms/types/global'
 
 const themedClass = useTheme('MediaImage')
 
@@ -44,6 +45,7 @@ const props = withDefaults(
     media: MediaImageFragment
     mediaClass?: string
     imageAspectRatios?: string
+    imageFormat?: ImageFormat
     imageSizes?: string
     imageLoading?: 'lazy' | 'eager' | undefined
     showCaption?: boolean
@@ -55,9 +57,29 @@ const props = withDefaults(
   },
 )
 
+const imageAspectRatios = computed(() => {
+  if (props.imageAspectRatios) {
+    return props.imageAspectRatios
+  }
+
+  if (props?.imageFormat == 'landscape') {
+    return '16/9'
+  }
+
+  if (props?.imageFormat == 'portrait') {
+    return '3/4'
+  }
+
+  if (props?.imageFormat == 'auto') {
+    return ''
+  }
+
+  return
+})
+
 const { placeHolderImage, imageSources } = useImageSources({
   media: toRef(props, 'media'),
-  imageAspectRatios: toRef(props, 'imageAspectRatios'),
+  imageAspectRatios: imageAspectRatios,
   imageSizes: toRef(props, 'imageSizes'),
 })
 </script>

package/components/Media/index.vue

@@ -3,21 +3,26 @@
 </template>
 
 <script lang="ts" setup>
-
-import { MediaIcon, MediaImage, MediaRemoteVideo, MediaVideo } from '#components';
+import {
+  MediaIcon,
+  MediaImage,
+  MediaRemoteVideo,
+  MediaVideo,
+} from '#components'
 import type { MediaFragment } from '#graphql-operations'
+import type { ImageFormat } from '@iqual/nuxt-icms/types/global'
 
 const mediaComponentMap = {
-  'MediaImage': MediaImage,
-  'MediaVideo': MediaVideo,
-  'MediaRemoteVideo': MediaRemoteVideo,
-  'MediaIcon': MediaIcon,
+  MediaImage: MediaImage,
+  MediaVideo: MediaVideo,
+  MediaRemoteVideo: MediaRemoteVideo,
+  MediaIcon: MediaIcon,
 }
 
-type MediaType = keyof typeof mediaComponentMap;
+type MediaType = keyof typeof mediaComponentMap
 const mediaType = computed<MediaType>(() => {
-  return props.media?.type as MediaType;
-});
+  return props.media?.type as MediaType
+})
 
 const props = defineProps<{
   media: MediaFragment
@@ -25,9 +30,9 @@ const props = defineProps<{
   figcaptionClass?: string
   showCaption?: boolean
   imageAspectRatios?: string
+  imageFormat?: ImageFormat
   imageSizes?: string
-  imageLoading?: "lazy" | "eager" | undefined
+  imageLoading?: 'lazy' | 'eager' | undefined
   elementClass?: string
 }>()
-
 </script>

package/components/Node/Icms/Page/Teaser/fragment.graphql

@@ -10,8 +10,11 @@ fragment nodeIcmsPageTeaser on NodeIcmsPage {
   mainImage: fieldIcmsImage {
     ...media
   }
+  topics: fieldIcmsTopics {
+    label
+  }
   link: url {
     path
   }
   linkLabel: fieldIcmsTeaserLinkLabel
-}
+}