Dev branch

resources/js/Components/ui/form/FormControl.vue

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

resources/js/Components/ui/form/FormDescription.vue

@@ -0,0 +1,19 @@
+<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"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

resources/js/Components/ui/form/FormItem.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useId } from "reka-ui";
+import { provide } from "vue";
+import { cn } from "@/lib/utils";
+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 :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/form/FormLabel.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { cn } from "@/lib/utils";
+import { Label } from '@/Components/ui/label';
+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
+    :class="cn(error && 'text-destructive', props.class)"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

resources/js/Components/ui/form/FormMessage.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { ErrorMessage } from "vee-validate";
+import { toValue } from "vue";
+import { useFormField } from "./useFormField";
+
+const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-[0.8rem] font-medium text-destructive"
+  />
+</template>

resources/js/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";

resources/js/Components/ui/form/injectionKeys.js

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

resources/js/Components/ui/form/useFormField.js

@@ -0,0 +1,30 @@
+import { FieldContextKey } from "vee-validate";
+import { computed, inject } from "vue";
+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,
+  };
+}