fix: add missing import in form field

fix #171

Author: Barbapapazes

.vitepress/theme/components/AsideOutlineAfter.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { withoutLeadingSlash, withoutTrailingSlash } from 'ufo'
 import { useRoute } from 'vitepress'
 import { computed } from 'vue'
-import { withoutLeadingSlash, withoutTrailingSlash } from 'ufo'
 
 const route = useRoute()
 

src/components/FormField/FormField.vue

@@ -1,14 +1,12 @@
 <script lang="ts">
 import type { FormFieldInjectedOptions } from '@/ui/keys/form-field'
-import type { VariantProps } from 'tailwind-variants'
+import type { ComponentConfig } from '@/ui/types/utils'
 import { formFieldInjectionKey, inputIdInjectionKey } from '@/ui/keys/form-field'
 import theme from '@/ui/theme/form-field'
 import { tv } from 'tailwind-variants'
 import { computed, provide, ref, useId } from 'vue'
 
-const formField = tv(theme)
-
-type FormFieldVariants = VariantProps<typeof formField>
+type FormField = ComponentConfig<typeof theme>
 
 export interface FormFieldProps {
   as?: any
@@ -18,12 +16,12 @@ export interface FormFieldProps {
   help?: string
   error?: string | boolean
   hint?: string
-  size?: FormFieldVariants['size']
+  size?: FormField['variants']['size']
   required?: boolean
   eagerValidation?: boolean
   validateOnInputDelay?: number
   class?: any
-  ui?: Partial<typeof formField.slots>
+  ui?: FormField['slots']
 }
 
 export interface FormFieldSlots {
@@ -40,7 +38,7 @@ export interface FormFieldSlots {
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
 
-const ui = computed(() => formField({
+const ui = computed(() => tv(theme)({
   size: props.size,
   required: props.required,
 }))
@@ -62,6 +60,7 @@ provide(formFieldInjectionKey, computed(() => ({
   validateOnInputDelay: props.validateOnInputDelay,
   hint: props.hint,
   description: props.description,
+  help: props.help,
   ariaId,
 }) as FormFieldInjectedOptions<FormFieldProps>))
 </script>

src/theme/form-field.ts

@@ -3,12 +3,12 @@ export default {
     root: '',
     wrapper: '',
     labelWrapper: 'flex content-center items-center justify-between',
-    label: 'block font-medium text-(--ui-text)',
+    label: 'block font-medium text-default',
     container: 'mt-1 relative',
-    description: 'text-(--ui-text-muted)',
-    error: 'mt-2 text-(--ui-error)',
-    hint: 'text-(--ui-text-muted)',
-    help: 'mt-2 text-(--ui-text-muted)',
+    description: 'text-muted',
+    error: 'mt-2 text-error',
+    hint: 'text-muted',
+    help: 'mt-2 text-muted',
   },
   variants: {
     size: {
@@ -20,7 +20,7 @@ export default {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-(--ui-error)`,
+        label: `after:content-['*'] after:ms-0.5 after:text-error`,
       },
     },
   },