examples: wire datetime + autocomplete in react-mui & vue-vuetify

examples/react-mui/src/component-map.ts

@@ -1,4 +1,5 @@
 import type { FieldComponentMap } from '@formhaus/react';
+import { AutocompleteField } from './fields/AutocompleteField';
 import { CheckboxField } from './fields/CheckboxField';
 import { FileField } from './fields/FileField';
 import { RadioField } from './fields/RadioField';
@@ -14,7 +15,9 @@ export const components: FieldComponentMap = {
   number: TextField,
   password: TextField,
   date: TextField,
+  datetime: TextField,
   select: SelectField,
+  autocomplete: AutocompleteField,
   multiselect: SelectField,
   checkbox: CheckboxField,
   radio: RadioField,

examples/react-mui/src/definition.json

@@ -30,9 +30,9 @@
     },
     {
       "key": "country",
-      "type": "select",
+      "type": "autocomplete",
       "label": "Country",
-      "placeholder": "Select a country",
+      "placeholder": "Type to filter…",
       "options": [
         { "value": "US", "label": "United States" },
         { "value": "MX", "label": "Mexico" },
@@ -41,6 +41,12 @@
         { "value": "IN", "label": "India" }
       ],
       "validation": { "required": true }
+    },
+    {
+      "key": "meetingTime",
+      "type": "datetime",
+      "label": "Preferred meeting time",
+      "helperText": "We'll confirm by email"
     }
   ]
 }

examples/react-mui/src/fields/AutocompleteField.tsx

@@ -0,0 +1,47 @@
+import type { FieldComponentProps } from '@formhaus/react';
+import Autocomplete from '@mui/material/Autocomplete';
+import MuiTextField from '@mui/material/TextField';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+export function AutocompleteField({
+  field,
+  value,
+  error,
+  loading,
+  disabled,
+  onChange,
+  onBlur,
+  onFocus,
+}: FieldComponentProps) {
+  const options = (field.options ?? []) as Option[];
+  const selected = options.find((o) => o.value === value) ?? null;
+
+  return (
+    <Autocomplete
+      id={field.key}
+      options={options}
+      value={selected}
+      getOptionLabel={(opt) => opt.label}
+      isOptionEqualToValue={(a, b) => a.value === b.value}
+      onChange={(_, opt) => onChange(opt?.value ?? '')}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      disabled={disabled || loading}
+      fullWidth
+      renderInput={(params) => (
+        <MuiTextField
+          {...params}
+          label={field.label}
+          placeholder={field.placeholder}
+          error={!!error}
+          helperText={error || field.helperText}
+          margin="normal"
+        />
+      )}
+    />
+  );
+}

examples/react-mui/src/fields/TextField.tsx

@@ -14,9 +14,12 @@ export function TextField({
     : field.type === 'password' ? 'password'
     : field.type === 'number' ? 'number'
     : field.type === 'date' ? 'date'
+    : field.type === 'datetime' ? 'datetime-local'
     : field.type === 'phone' ? 'tel'
     : 'text';
 
+  const shrinkLabel = field.type === 'date' || field.type === 'datetime';
+
   return (
     <MuiTextField
       id={field.key}
@@ -31,7 +34,7 @@ export function TextField({
       fullWidth
       margin="normal"
       slotProps={{
-        inputLabel: field.type === 'date' ? { shrink: true } : undefined,
+        inputLabel: shrinkLabel ? { shrink: true } : undefined,
       }}
     />
   );

examples/vue-vuetify/src/component-map.ts

@@ -1,4 +1,5 @@
 import type { FieldComponentMap } from '@formhaus/vue';
+import AutocompleteField from './fields/AutocompleteField.vue';
 import CheckboxField from './fields/CheckboxField.vue';
 import FileField from './fields/FileField.vue';
 import RadioField from './fields/RadioField.vue';
@@ -14,7 +15,9 @@ export const components: Partial<FieldComponentMap> = {
   number: TextField,
   password: TextField,
   date: TextField,
+  datetime: TextField,
   select: SelectField,
+  autocomplete: AutocompleteField,
   multiselect: SelectField,
   checkbox: CheckboxField,
   radio: RadioField,

examples/vue-vuetify/src/definition.json

@@ -30,9 +30,9 @@
     },
     {
       "key": "country",
-      "type": "select",
+      "type": "autocomplete",
       "label": "Country",
-      "placeholder": "Select a country",
+      "placeholder": "Type to filter…",
       "options": [
         { "value": "US", "label": "United States" },
         { "value": "MX", "label": "Mexico" },
@@ -41,6 +41,12 @@
         { "value": "IN", "label": "India" }
       ],
       "validation": { "required": true }
+    },
+    {
+      "key": "meetingTime",
+      "type": "datetime",
+      "label": "Preferred meeting time",
+      "helperText": "We'll confirm by email"
     }
   ]
 }

examples/vue-vuetify/src/fields/AutocompleteField.vue

@@ -0,0 +1,30 @@
+<script setup>
+defineProps({
+  field: { type: Object, required: true },
+  value: { default: undefined },
+  error: { type: String, default: undefined },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:value', 'blur', 'focus']);
+</script>
+
+<template>
+  <v-autocomplete
+    :id="field.key"
+    :label="field.label"
+    :model-value="value ?? ''"
+    :items="field.options ?? []"
+    item-title="label"
+    item-value="value"
+    :placeholder="field.placeholder || 'Type to filter…'"
+    :error-messages="error ? [error] : []"
+    :hint="field.helperText"
+    :persistent-hint="!!field.helperText"
+    :disabled="disabled || loading"
+    @update:model-value="(v) => emit('update:value', v ?? '')"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  />
+</template>

examples/vue-vuetify/src/fields/TextField.vue

@@ -14,6 +14,7 @@ const inputType =
   : props.field.type === 'password' ? 'password'
   : props.field.type === 'number' ? 'number'
   : props.field.type === 'date' ? 'date'
+  : props.field.type === 'datetime' ? 'datetime-local'
   : props.field.type === 'phone' ? 'tel'
   : 'text';
 </script>