@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Form/CheckboxInputs.vue

@@ -1,44 +1,195 @@
-<script setup lang="ts">
-import type { CheckboxInputs } from '@iqual/nuxt-icms/components/Form/utils/types'
+<script lang="ts" setup>
+import type { CheckboxesProps } 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: CheckboxInputs }>()
+const props = defineProps<{ formElement: CheckboxesProps; debug: boolean }>()
+const model = defineModel<any[]>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormCheckboxInputs')
 
-const { cleanDescription, getValidationData, getFormattedOptions } =
-  useFormElement(props.formElement)
+const { cleanDescription, formattedOptions } = useFormElement(props.formElement)
+
+if (props.debug)
+  console.log(
+    `[${props.formElement.metadata.title} (${props.formElement.metadata.key})] Props:`,
+    props,
+  )
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+
+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 checkboxBase = tv({
+  base: themedClass('checkboxBase', 'cursor-pointer size-5 rounded-none'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'checkboxBaseVariantsColorSchemeNone',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      dark: themedClass(
+        'checkboxBaseVariantsColorSchemeDark',
+        'ring-gray-700 dark:ring-gray-700',
+      ),
+      light: themedClass(
+        'checkboxBaseVariantsColorSchemeLight',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      accent: themedClass(
+        'checkboxBaseVariantsColorSchemeAccent',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+    },
+  },
+})
+
+const checkboxLabel = tv({
+  base: themedClass(
+    'checkboxLabelBase',
+    'text-base font-medium leading-tight mb-1 cursor-pointer',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'checkboxLabelVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'checkboxLabelVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'checkboxLabelVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'checkboxLabelVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const checkboxDescription = tv({
+  base: themedClass('checkboxDescriptionBase', 'text-xs'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'checkboxDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'checkboxDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'checkboxDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'checkboxDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+const checkboxIndicator = tv({
+  base: themedClass('checkboxIndicatorBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'checkboxIndicatorVariantsColorSchemeNone',
+        'text-white',
+      ),
+      dark: themedClass(
+        'checkboxIndicatorVariantsColorSchemeDark',
+        'text-white',
+      ),
+      light: themedClass(
+        'checkboxIndicatorVariantsColorSchemeLight',
+        'text-white',
+      ),
+      accent: themedClass(
+        'checkboxIndicatorVariantsColorSchemeAccent',
+        'text-white',
+      ),
+    },
+  },
+})
 </script>
 
 <template>
-  <FormKit
-    type="checkbox"
-    :name="formElement?.metadata?.key"
-    :help="cleanDescription"
-    :validation="getValidationData.rules || ''"
-    :validationMessages="getValidationData.messages || {}"
+  <UFormField
+    :name="formElement.metadata.key"
+    :label="formElement.metadata.title"
+    :required="Boolean(formElement.metadata.required)"
+    :description="cleanDescription"
+    :ui="{
+      label: formFieldLabel({ colorScheme }),
+      description: formFieldDescription({ colorScheme }),
+    }"
   >
-    <template #wrapper>
-      <Label class="mb-2 block text-base font-normal">
-        {{ `${formElement?.metadata?.title}${formElement?.metadata?.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?.metadata?.key}-${index}`"
-            class="border-1 focus-visible:ring-primary data-[state=checked]:text-primary dark:focus-visible:ring-primary dark:data-[state=checked]:text-primary size-5 border-gray-200 bg-white focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:bg-white dark:data-[state=checked]:bg-white"
-          />
-          <Label
-            :for="`${formElement?.metadata?.key}-${index}`"
-            class="text-base font-normal"
-          >
-            {{ option.label }}
-          </Label>
-        </div>
-      </div>
-    </template>
-  </FormKit>
+    <UCheckboxGroup
+      v-model="model"
+      :items="formattedOptions"
+      :ui="{
+        container: themedClass('checkboxContainer', 'cursor-pointer'),
+        base: checkboxBase({ colorScheme }),
+        indicator: checkboxIndicator({ colorScheme }),
+        wrapper: themedClass('checkboxWrapper', 'ms-3'),
+        label: checkboxLabel({ colorScheme }),
+        description: checkboxDescription({ colorScheme }),
+      }"
+    />
+  </UFormField>
 </template>

package/components/Form/FileInput.vue

@@ -0,0 +1,319 @@
+<script lang="ts" setup>
+import type { FileInputProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useFormDefaultValue } from './composables/useFormDefaultValue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+
+const props = defineProps<{ formElement: FileInputProps; debug: boolean }>()
+const model = defineModel<File | File[] | null>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormFileInput')
+
+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 floatingLabel = tv({
+  base: themedClass(
+    'floatingLabelBase',
+    'pointer-events-none absolute left-1.5 -top-2 z-10 origin-left px-1 text-xs font-medium',
+  ),
+  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',
+      ),
+    },
+  },
+})
+
+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',
+      ),
+    },
+  },
+})
+
+const fileUploadBase = tv({
+  base: themedClass(
+    'fileUploadBase',
+    'rounded-none cursor-pointer data-[dragging=true]:bg-gray-50 [&_[data-slot=root]]:bg-primary-500 [&_[data-slot=icon]]:text-white',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadBaseVariantsColorSchemeNone',
+        'bg-white border-gray-200 hover:bg-gray-50 dark:bg-white dark:border-gray-200 dark:hover:bg-gray-50',
+      ),
+      dark: themedClass(
+        'fileUploadBaseVariantsColorSchemeDark',
+        'bg-gray-800 border-gray-700 hover:bg-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700',
+      ),
+      light: themedClass(
+        'fileUploadBaseVariantsColorSchemeLight',
+        'bg-white border-gray-200 hover:bg-gray-50 dark:bg-white dark:border-gray-200 dark:hover:bg-gray-50',
+      ),
+      accent: themedClass(
+        'fileUploadBaseVariantsColorSchemeAccent',
+        'bg-white border-gray-200 hover:bg-gray-50 dark:bg-white dark:border-gray-200 dark:hover:bg-gray-50',
+      ),
+    },
+  },
+})
+
+const fileUploadDescription = tv({
+  base: themedClass('fileUploadDescriptionBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'fileUploadDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'fileUploadDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'fileUploadDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const fileUploadFile = tv({
+  base: themedClass(
+    'fileUploadFileBase',
+    'rounded-none gap-4 [&_[data-slot=base]]:cursor-pointer',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadFileVariantsColorSchemeNone',
+        'border-gray-200 dark:border-gray-200 [&_[data-slot=root]]:bg-gray-50 [&_[data-slot=base]]:text-gray-950 [&_[data-slot=icon]]:text-gray-950',
+      ),
+      dark: themedClass(
+        'fileUploadFileVariantsColorSchemeDark',
+        'border-gray-700 dark:border-gray-700 [&_[data-slot=root]]:bg-gray-700 [&_[data-slot=base]]:text-gray-200 [&_[data-slot=icon]]:text-gray-200',
+      ),
+      light: themedClass(
+        'fileUploadFileVariantsColorSchemeLight',
+        'border-gray-200 dark:border-gray-200 [&_[data-slot=root]]:bg-gray-50 [&_[data-slot=base]]:text-gray-950 [&_[data-slot=icon]]:text-gray-950',
+      ),
+      accent: themedClass(
+        'fileUploadFileVariantsColorSchemeAccent',
+        'border-gray-200 dark:border-gray-200 [&_[data-slot=root]]:bg-gray-50 [&_[data-slot=base]]:text-gray-950 [&_[data-slot=icon]]:text-gray-950',
+      ),
+    },
+  },
+})
+
+const fileUploadFileName = tv({
+  base: themedClass('fileUploadFileNameBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadFileNameVariantsColorSchemeNone',
+        'text-gray-950',
+      ),
+      dark: themedClass(
+        'fileUploadFileNameVariantsColorSchemeDark',
+        'text-gray-200',
+      ),
+      light: themedClass(
+        'fileUploadFileNameVariantsColorSchemeLight',
+        'text-gray-950',
+      ),
+      accent: themedClass(
+        'fileUploadFileNameVariantsColorSchemeAccent',
+        'text-gray-950',
+      ),
+    },
+  },
+})
+
+const fileUploadFileSize = tv({
+  base: themedClass('fileUploadFileSizeBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadFileSizeVariantsColorSchemeNone',
+        'text-gray-400',
+      ),
+      dark: themedClass(
+        'fileUploadFileSizeVariantsColorSchemeDark',
+        'text-gray-400',
+      ),
+      light: themedClass(
+        'fileUploadFileSizeVariantsColorSchemeLight',
+        'text-gray-400',
+      ),
+      accent: themedClass(
+        'fileUploadFileSizeVariantsColorSchemeAccent',
+        'text-gray-400',
+      ),
+    },
+  },
+})
+const fileUploadIcon = tv({
+  base: themedClass('fileUploadIconBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'fileUploadIconVariantsColorSchemeNone',
+        'text-white dark:text-white',
+      ),
+      dark: themedClass(
+        'fileUploadIconVariantsColorSchemeDark',
+        'text-white dark:text-white',
+      ),
+      light: themedClass(
+        'fileUploadIconVariantsColorSchemeLight',
+        'text-white dark:text-white',
+      ),
+      accent: themedClass(
+        'fileUploadIconVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+</script>
+
+<template>
+  <UFormField
+    :name="formElement.metadata.key"
+    :label="floatingLabels ? undefined : formElement.metadata.title"
+    :required="formElement.metadata.required"
+    :description="floatingLabels ? undefined : formElement.metadata.description"
+    :ui="{
+      label: formFieldLabel({ colorScheme }),
+      description: formFieldDescription({ colorScheme }),
+    }"
+  >
+    <div :class="themedClass('fileUploadWrapper', 'relative')">
+      <UFileUpload
+        v-model="model"
+        layout="list"
+        :multiple="Boolean(formElement.metadata.multiple)"
+        :ui="{
+          base: fileUploadBase({ colorScheme }),
+          icon: fileUploadIcon({ colorScheme }),
+          description: fileUploadDescription({ colorScheme }),
+          file: fileUploadFile({ colorScheme }),
+          fileName: fileUploadFileName({ colorScheme }),
+          fileSize: fileUploadFileSize({ colorScheme }),
+        }"
+      >
+        <template
+          v-if="!floatingLabels"
+          #description
+        >
+          <span v-html="formElement.metadata.description" />
+        </template>
+      </UFileUpload>
+      <label
+        v-if="floatingLabels"
+        :class="floatingLabel({ colorScheme })"
+      >
+        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      </label>
+    </div>
+    <div
+      v-if="floatingLabels && formElement.metadata.description"
+      :class="formFieldDescription({ colorScheme })"
+      v-html="formElement.metadata.description"
+    />
+  </UFormField>
+</template>

package/components/Form/HiddenInput.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { TextInputProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormDefaultValue } from '@iqual/nuxt-icms/components/Form/composables/useFormDefaultValue'
+
+const props = defineProps<{ formElement: TextInputProps }>()
+const model = defineModel<string | number | boolean | null>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+</script>
+
+<template>
+  <UFormField
+    :name="formElement?.metadata?.key"
+    class="hidden"
+  >
+    <input
+      type="hidden"
+      :name="formElement?.metadata?.key"
+      :value="model != null ? String(model) : ''"
+    />
+  </UFormField>
+</template>