@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Form/TextAreaInput.vue

@@ -1,34 +1,210 @@
 <script lang="ts" setup>
-import type { TextAreaInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { TextareaInputProps } 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: TextAreaInput }>()
+const props = defineProps<{ formElement: TextareaInputProps; debug: boolean }>()
+const model = defineModel<string | number>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormTextAreaInput')
 
-const { cleanDescription, getValidationData } = useFormElement(
-  props.formElement,
-)
-const inputValue = ref<string | undefined>(undefined)
-const isFocused = ref<boolean>(false)
+const { cleanDescription } = useFormElement(props.formElement)
+
+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 isTextAreaFocused = ref(false)
+
+const textAreaHasValue = computed(() => {
+  return model.value !== null && model.value !== undefined && `${model.value}`.length > 0
+})
+
+const textAreaShouldFloat = computed(() => {
+  return isTextAreaFocused.value || textAreaHasValue.value
+})
+
+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 textAreaBase = tv({
+  base: themedClass(
+    'textAreaBase',
+    '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(
+        'textAreaBaseVariantsColorSchemeNone',
+        '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(
+        'textAreaBaseVariantsColorSchemeDark',
+        '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(
+        'textAreaBaseVariantsColorSchemeLight',
+        '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(
+        'textAreaBaseVariantsColorSchemeAccent',
+        '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 z-10 origin-left px-1 transition-all duration-200',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'floatingLabelVariantsColorSchemeNone',
+        'text-gray-600 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'floatingLabelVariantsColorSchemeDark',
+        'text-gray-300 dark:text-gray-300',
+      ),
+      light: themedClass(
+        'floatingLabelVariantsColorSchemeLight',
+        'text-gray-600 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'floatingLabelVariantsColorSchemeAccent',
+        'text-gray-600 dark:text-gray-400',
+      ),
+    },
+    floating: {
+      true: themedClass('floatingLabelVariantsFloatingTrue', '-top-2 text-xs font-medium'),
+      false: themedClass('floatingLabelVariantsFloatingFalse', 'top-4 text-base font-normal'),
+    },
+    focused: {
+      true: themedClass('floatingLabelVariantsFocusedTrue', 'text-primary-600 dark:text-primary-400'),
+      false: themedClass('floatingLabelVariantsFocusedFalse', ''),
+    },
+  },
+})
+
+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="textarea"
-    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"
-  />
+  >
+    <div :class="themedClass('textAreaWrapper', 'relative')">
+      <UTextarea
+        v-model="model"
+        :id="formElement.metadata.key"
+        :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+        :maxlength="formElement.maxlength"
+        :minlength="formElement.minlength"
+        :pattern="formElement.pattern?.rule"
+        :data-floating="floatingLabels"
+        @focus="isTextAreaFocused = true"
+        @blur="isTextAreaFocused = false"
+        :ui="{
+          root: themedClass('textAreaRoot', 'relative flex items-center'),
+          base: textAreaBase({ colorScheme }),
+        }"
+      />
+      <label
+        v-if="floatingLabels"
+        :class="floatingLabel({ colorScheme, floating: textAreaShouldFloat, focused: isTextAreaFocused })"
+        :for="formElement.metadata.key"
+      >
+        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      </label>
+    </div>
+  </UFormField>
 </template>

package/components/Form/TextEmailInput.vue

@@ -1,35 +1,190 @@
 <script lang="ts" setup>
-import type { TextEmailInput } 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: TextEmailInput }>()
+const props = defineProps<{ formElement: TextInputProps; debug: boolean }>()
+const model = defineModel<string | number>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormTextEmailInput')
 
-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="email"
-    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/TextInput.vue

@@ -1,35 +1,190 @@
 <script lang="ts" setup>
-import type { TextInput } 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: TextInput }>()
+const props = defineProps<{ formElement: TextInputProps; debug: boolean }>()
+const model = defineModel<string | number>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormTextInput')
 
-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',
+    'peer text-base py-3 px-4 rounded-none 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="text"
-    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 }),
+      description: formFieldDescription({ colorScheme }),
+      help: 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>