replace el-form

src/components/ui/field/Field.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { fieldVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="field"
+        :data-orientation="orientation"
+        :class="cn(fieldVariants({ orientation }), props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/field/FieldContent.vue

@@ -0,0 +1,15 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-content"
+        :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/field/FieldDescription.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <p
+        data-slot="field-description"
+        :class="
+            cn(
+                'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+                'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+                '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+                props.class
+            )
+        ">
+        <slot />
+    </p>
+</template>

src/components/ui/field/FieldError.vue

@@ -0,0 +1,48 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        errors: { type: Array, required: false }
+    });
+
+    const content = computed(() => {
+        if (!props.errors || props.errors.length === 0) return null;
+
+        const uniqueErrors = [
+            ...new Map(
+                props.errors.filter(Boolean).map((error) => {
+                    const message = typeof error === 'string' ? error : error?.message;
+                    return [message, error];
+                })
+            ).values()
+        ];
+
+        if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+            return typeof uniqueErrors[0] === 'string' ? uniqueErrors[0] : uniqueErrors[0].message;
+        }
+
+        return uniqueErrors.map((error) => (typeof error === 'string' ? error : error?.message));
+    });
+</script>
+
+<template>
+    <div
+        v-if="$slots.default || content"
+        role="alert"
+        data-slot="field-error"
+        :class="cn('text-destructive text-sm font-normal', props.class)">
+        <slot v-if="$slots.default" />
+
+        <template v-else-if="typeof content === 'string'">
+            {{ content }}
+        </template>
+
+        <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+            <li v-for="(error, index) in content" :key="index">
+                {{ error }}
+            </li>
+        </ul>
+    </div>
+</template>

src/components/ui/field/FieldGroup.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-group"
+        :class="
+            cn(
+                'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>

src/components/ui/field/FieldLabel.vue

@@ -0,0 +1,23 @@
+<script setup>
+    import { Label } from '@/components/ui/label';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <Label
+        data-slot="field-label"
+        :class="
+            cn(
+                'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+                'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+                'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+                props.class
+            )
+        ">
+        <slot />
+    </Label>
+</template>

src/components/ui/field/FieldLegend.vue

@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        variant: { type: String, required: false }
+    });
+</script>
+
+<template>
+    <legend
+        data-slot="field-legend"
+        :data-variant="variant"
+        :class="cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', props.class)">
+        <slot />
+    </legend>
+</template>

src/components/ui/field/FieldSeparator.vue

@@ -0,0 +1,23 @@
+<script setup>
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-separator"
+        :data-content="!!$slots.default"
+        :class="cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)">
+        <Separator class="absolute inset-0 top-1/2" />
+        <span
+            v-if="$slots.default"
+            class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+            data-slot="field-separator-content">
+            <slot />
+        </span>
+    </div>
+</template>

src/components/ui/field/FieldSet.vue

@@ -0,0 +1,21 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <fieldset
+        data-slot="field-set"
+        :class="
+            cn(
+                'flex flex-col gap-6',
+                'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+                props.class
+            )
+        ">
+        <slot />
+    </fieldset>
+</template>

src/components/ui/field/FieldTitle.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="field-label"
+        :class="
+            cn(
+                'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
+</template>

src/components/ui/field/index.js

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+export const fieldVariants = cva(
+    'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+    {
+        variants: {
+            orientation: {
+                vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+                horizontal: [
+                    'flex-row items-center',
+                    '[&>[data-slot=field-label]]:flex-auto',
+                    'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ],
+                responsive: [
+                    'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+                    '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                    '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+                ]
+            }
+        },
+        defaultVariants: {
+            orientation: 'vertical'
+        }
+    }
+);
+
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';

src/components/ui/form/FormControl.vue

@@ -0,0 +1,17 @@
+<script setup>
+    import { Slot } from 'reka-ui';
+
+    import { useFormField } from './useFormField';
+
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+    <Slot
+        :id="formItemId"
+        data-slot="form-control"
+        :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+        :aria-invalid="!!error">
+        <slot />
+    </Slot>
+</template>

src/components/ui/form/FormDescription.vue

@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+    <p :id="formDescriptionId" data-slot="form-description" :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </p>
+</template>

src/components/ui/form/FormItem.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+    import { provide } from 'vue';
+    import { useId } from 'reka-ui';
+
+    import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const id = useId();
+    provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+    <div data-slot="form-item" :class="cn('grid gap-2', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script setup>
+    import { Label } from '@/components/ui/label';
+    import { cn } from '@/lib/utils';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        for: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const { error, formItemId } = useFormField();
+</script>
+
+<template>
+    <Label
+        data-slot="form-label"
+        :data-error="!!error"
+        :class="cn('data-[error=true]:text-destructive', props.class)"
+        :for="formItemId">
+        <slot />
+    </Label>
+</template>

src/components/ui/form/FormMessage.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { ErrorMessage } from 'vee-validate';
+    import { cn } from '@/lib/utils';
+    import { toValue } from 'vue';
+
+    import { useFormField } from './useFormField';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+
+    const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+    <ErrorMessage
+        :id="formMessageId"
+        data-slot="form-message"
+        as="p"
+        :name="toValue(name)"
+        :class="cn('text-destructive text-sm', props.class)" />
+</template>

src/components/ui/form/index.js

@@ -0,0 +1,11 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export {
+    Form,
+    Field as FormField,
+    FieldArray as FormFieldArray
+} from 'vee-validate';

src/components/ui/form/injectionKeys.js

@@ -0,0 +1 @@
+export const FORM_ITEM_INJECTION_KEY = Symbol();

src/components/ui/form/useFormField.js

@@ -0,0 +1,31 @@
+import { computed, inject } from 'vue';
+import { FieldContextKey } from 'vee-validate';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+export function useFormField() {
+    const fieldContext = inject(FieldContextKey);
+    const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+    if (!fieldContext)
+        throw new Error('useFormField should be used within <FormField>');
+
+    const { name, errorMessage: error, meta } = fieldContext;
+    const id = fieldItemContext;
+
+    const fieldState = {
+        valid: computed(() => meta.valid),
+        isDirty: computed(() => meta.dirty),
+        isTouched: computed(() => meta.touched),
+        error
+    };
+
+    return {
+        id,
+        name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState
+    };
+}

src/components/ui/input-group/InputGroupButton.vue

@@ -13,6 +13,7 @@
 
 <template>
     <Button
+        type="button"
         :data-size="props.size"
         :variant="props.variant"
         :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)">

src/components/ui/label/Label.vue

@@ -0,0 +1,28 @@
+<script setup>
+    import { Label } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        for: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Label
+        data-slot="label"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                props.class
+            )
+        ">
+        <slot />
+    </Label>
+</template>

src/components/ui/label/index.js

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';