homemanager-fe/src/views/Dashboard.vue

<template>
  <StandardLayout>
    <h1>Dashboard</h1>
    <p>Hello, {{ user.name }}</p>

    <Form @submit="test" :validators="validators">
      <FormDateField
        name="date"
        label="datepicker"
        locale="en-UK"
        clearable
        :enable-time-picker="false"
      />
      <FormField name="test" label="test" />
      <FormAutocompleteField
        :search-fn="searchFn"
        name="autocomplete"
        label="autocomplete"
      />
      <FormTextareaField name="textarea" label="textarea" rows="3" />
      <button type="submit">test</button>
    </Form>
  </StandardLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '../store/user.store';
import StandardLayout from '../components/StandardLayout.vue';
import FormDateField from '../components/form/fields/FormDateField.vue';
import Form from '../components/form/Form.vue';
import FormField from '../components/form/FormField.vue';
import { IsRequired } from '../components/form/validators';
import FormAutocompleteField from '../components/form/fields/FormAutocompleteField.vue';
import FormTextareaField from '../components/form/fields/FormTextareaField.vue';

const userStore = useUserStore();
const user = ref(userStore.user);

const test = console.log;
const validators = [{ field: 'date', validators: [IsRequired()] }];

const autocompleteTest = [
  {
    id: 1,
    displayName: 'search things',
  },
  {
    id: 2,
    displayName: 'potato',
  },
  {
    id: 3,
    displayName: 'carrot',
  },
  {
    id: 4,
    displayName: 'beet',
  },
];

const searchFn = async (query: string) => {
  await new Promise((resolve) => setTimeout(resolve, 800));
  return query === ''
    ? autocompleteTest
    : autocompleteTest.filter((person) =>
        person.displayName
          .toLowerCase()
          .replace(/\s+/g, '')
          .includes(query.toLowerCase().replace(/\s+/g, ''))
      );
};
</script>