1
1
<template >
2
- <forge-checkbox :id =" props.name" v-if =" props.type === 'checkbox'" :label =" props.fieldLabel" v-bind =" $attrs"
3
- :name =" props.name" v-model =" model" />
4
- <div class =" d-flex flex-column w-100" v-else >
2
+ <forge-checkbox
3
+ v-if =" props.type === 'checkbox'" :id =" props.name" v-bind =" $attrs" v-model =" model"
4
+ :label =" props.fieldLabel" :name =" props.name" />
5
+ <div v-else class =" d-flex flex-column w-100" >
5
6
<div data-cy =" input-wrapper" class =" d-flex" :class =" props.fieldLabelPosition === 'top' ? 'flex-column' : 'flex-row'" >
6
7
<label :for =" props.name" :class =" props.fieldLabelPosition === 'top' ? 'mb-1' : ('me-2 ' + props.labelWidthClass)" >{{ props.fieldLabel }}</label >
7
- <input-number :id =" props.name" v-if =" props.type === 'number'" v-bind =" $attrs"
8
- :placeholder =" props.placeholder" :input-class =" {'is-invalid': hasErrors }" :class =" {'is-invalid': hasErrors }"
9
- v-model =" model"
8
+ <input-number
9
+ v-if =" props.type === 'number'" :id =" props.name" v-bind =" $attrs"
10
+ v-model =" model" :placeholder =" props.placeholder" :input-class =" {'is-invalid': hasErrors }"
11
+ :class =" {'is-invalid': hasErrors }"
10
12
@input =" change"
11
13
/>
12
- <Textarea :id =" props.name" v-else-if =" props.type === 'textarea'" v-bind =" $attrs"
13
- :placeholder =" props.placeholder" :class =" {'is-invalid': hasErrors }"
14
- v-model =" model"
14
+ <Textarea
15
+ v-else-if =" props.type === 'textarea'" :id =" props.name" v-bind =" $attrs"
16
+ v-model =" model" :placeholder =" props.placeholder"
17
+ :class =" {'is-invalid': hasErrors }"
15
18
@input =" change" @blur =" handleBlur"
16
19
/>
17
- <InputMask :id =" props.name" v-else-if =" props.type === 'mask'" v-bind =" $attrs"
18
- :placeholder =" props.placeholder" :mask =" props.mask" :class =" {'is-invalid': hasErrors }"
19
- v-model =" model" @complete =" change" @blur =" handleBlur"
20
+ <InputMask
21
+ v-else-if =" props.type === 'mask'" :id =" props.name" v-bind =" $attrs"
22
+ v-model =" model" :placeholder =" props.placeholder" :mask =" props.mask"
23
+ :class =" {'is-invalid': hasErrors }" @complete =" change" @blur =" handleBlur"
20
24
/>
21
- <InputText :id =" props.name" v-else-if =" props.type === 'text'" v-bind =" $attrs"
22
- :placeholder =" props.placeholder" :class =" {'is-invalid': hasErrors }"
23
- v-model =" model"
25
+ <InputText
26
+ v-else-if =" props.type === 'text'" :id =" props.name" v-bind =" $attrs"
27
+ v-model =" model" :placeholder =" props.placeholder"
28
+ :class =" {'is-invalid': hasErrors }"
24
29
@input =" change" @blur =" handleBlur"
25
30
/>
26
- <Select v-else-if =" props.type === 'select'" v-bind =" {...props,...$attrs}" v-model =" model"
31
+ <Select
32
+ v-else-if =" props.type === 'select'" v-bind =" {...props,...$attrs}" v-model =" model"
27
33
:class =" {'is-invalid': hasErrors }" />
28
- <MultiSelect v-else-if =" props.type === 'multiselect'" v-bind =" {...props,...$attrs}" v-model =" model"
34
+ <MultiSelect
35
+ v-else-if =" props.type === 'multiselect'" v-bind =" {...props,...$attrs}" v-model =" model"
29
36
:class =" {'is-invalid': hasErrors }" />
30
- <ForgeMultiSelectPreview v-else-if =" props.type === 'multiselect-preview'" v-bind =" {...props,...$attrs}" v-model =" model"
37
+ <ForgeMultiSelectPreview
38
+ v-else-if =" props.type === 'multiselect-preview'" v-bind =" {...props,...$attrs}" v-model =" model"
31
39
:class =" {'is-invalid': hasErrors }" />
32
- <ForgeDatepicker v-else-if =" props.type === 'datepicker'" v-bind =" {...props,...$attrs}" v-model =" model"
40
+ <ForgeDatepicker
41
+ v-else-if =" props.type === 'datepicker'" v-bind =" {...props,...$attrs}" v-model =" model"
33
42
:class =" {'is-invalid': hasErrors }" />
34
43
</div >
35
44
<small v-show =" hasErrors && props.type !== 'multiselect' && props.type !== 'datepicker'" data-cy =" error" class =" invalid-feedback" >{{ errorMessage }}</small >
@@ -44,7 +53,6 @@ import { computed, watch } from "vue";
44
53
import { ForgeFormFieldTypes } from " ../types/forge-types" ;
45
54
import ForgeMultiSelectPreview from " @/components/ForgeMultiSelectPreview.vue" ;
46
55
47
- // @ts-ignore
48
56
export interface ForgeFormFieldProps {
49
57
name: string ,
50
58
fieldLabelPosition? : ' left' | ' top' ,
0 commit comments