66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<StandardLayout>
|
|
<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 StandardLayout from '../components/StandardLayout.vue';
|
|
import { IsRequired } from '../components/form/validators';
|
|
import FormDateField from '../components/form/fields/FormDateField.vue';
|
|
import Form from '../components/form/Form.vue';
|
|
import FormField from '../components/form/FormField.vue';
|
|
import FormAutocompleteField from '../components/form/fields/FormAutocompleteField.vue';
|
|
import FormTextareaField from '../components/form/fields/FormTextareaField.vue';
|
|
|
|
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>
|