@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/.prettierrc +6 -8
  2. package/package.json +21 -9
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +78 -79
  6. package/src/assets/svgIcons/adjust_roof.svg +6 -0
  7. package/src/assets/svgIcons/copy.svg +10 -0
  8. package/src/assets/theme.js +3 -3
  9. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  10. package/src/components/addNewButton/index.vue +51 -48
  11. package/src/components/banner/actionBanner/index.vue +55 -54
  12. package/src/components/banner/banner/banner.stories.js +5 -5
  13. package/src/components/banner/banner/index.vue +159 -159
  14. package/src/components/banner/infoBanner/index.vue +53 -41
  15. package/src/components/buttons/buttonIcon/index.vue +122 -125
  16. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  17. package/src/components/buttons/closeButton/index.vue +49 -49
  18. package/src/components/buttons/mainButton/index.vue +119 -119
  19. package/src/components/card/index.vue +70 -70
  20. package/src/components/collapsableInfoText/index.vue +94 -96
  21. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  22. package/src/components/deleteIcon/index.vue +54 -54
  23. package/src/components/draggableInputHandle/index.vue +37 -37
  24. package/src/components/dropdown/Dropdown.stories.js +10 -9
  25. package/src/components/dropdown/index.vue +106 -106
  26. package/src/components/errorMessage/index.vue +52 -52
  27. package/src/components/filter/filterSettings.vue +433 -439
  28. package/src/components/filter/index.vue +135 -135
  29. package/src/components/filter/parentDropdown.vue +73 -73
  30. package/src/components/icon/Icons.stories.js +7 -7
  31. package/src/components/icon/iconCollection.vue +53 -53
  32. package/src/components/icon/index.vue +121 -121
  33. package/src/components/iconWrapper/index.vue +156 -156
  34. package/src/components/infoCard/index.vue +26 -26
  35. package/src/components/infoText/index.vue +132 -133
  36. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  37. package/src/components/inputs/checkbox/index.vue +180 -190
  38. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  39. package/src/components/inputs/inputNumber/index.vue +644 -647
  40. package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
  41. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  42. package/src/components/inputs/inputText/index.vue +336 -337
  43. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  44. package/src/components/inputs/radioButton/index.vue +219 -221
  45. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  46. package/src/components/inputs/searchInput/index.vue +126 -126
  47. package/src/components/inputs/select/index.vue +776 -778
  48. package/src/components/inputs/select/option/index.vue +124 -124
  49. package/src/components/inputs/select/select.stories.js +32 -31
  50. package/src/components/inputs/slider/index.vue +99 -99
  51. package/src/components/inputs/switchField/index.vue +222 -220
  52. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  53. package/src/components/inputs/textAreaInput/index.vue +173 -171
  54. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  55. package/src/components/inputs/toggle/index.vue +217 -214
  56. package/src/components/label/index.vue +82 -82
  57. package/src/components/markerItem/index.vue +66 -68
  58. package/src/components/modals/actionModal/index.vue +54 -54
  59. package/src/components/modals/infoModal/index.vue +36 -39
  60. package/src/components/modals/modal/index.vue +134 -134
  61. package/src/components/modals/modal/modal.stories.js +5 -5
  62. package/src/components/navigationTabs/index.vue +94 -96
  63. package/src/components/pageSubtitle/index.vue +49 -55
  64. package/src/components/pageTitle/index.vue +56 -56
  65. package/src/components/pagination/index.vue +89 -92
  66. package/src/components/progressBar/index.vue +107 -107
  67. package/src/components/projectMarker/index.vue +244 -246
  68. package/src/components/rangeSlider/Slider.vue +465 -491
  69. package/src/components/rangeSlider/index.vue +410 -410
  70. package/src/components/rangeSlider/utils/dom.js +5 -5
  71. package/src/components/selectedOptions/index.vue +119 -119
  72. package/src/components/sideMenu/index.vue +199 -199
  73. package/src/components/spinner/index.vue +57 -57
  74. package/src/components/tableDropdown/index.vue +520 -520
  75. package/src/components/tables/mainTable/index.vue +362 -366
  76. package/src/components/tables/viewTable/index.vue +171 -171
  77. package/src/components/threeDots/index.vue +334 -340
  78. package/src/components/videoThumbnail/index.vue +86 -86
  79. package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
  80. package/src/helpers/numberConverter.js +2 -2
  81. package/src/helpers/translateLang.js +9 -9
  82. package/src/mixins/inputValidations.js +5 -5
  83. package/.eslintrc.js +0 -184
@@ -1,713 +1,710 @@
1
1
  <template>
2
- <Container :align-items="alignItems" :input-width="inputWidth">
3
- <LabelSlotWrapper
2
+ <container :inputWidth="inputWidth" :alignItems="alignItems">
3
+ <label-slot-wrapper
4
4
  v-if="hasLabelSlot"
5
- :align-items="alignItems"
6
- :border-color="borderColor"
7
- :is-error="isError"
8
- :is-interactive="isInteractive"
9
- :no-border="noBorder"
5
+ :isInteractive="isInteractive"
6
+ :alignItems="alignItems"
7
+ :noBorder="noBorder"
8
+ :isError="isError"
9
+ :borderColor="borderColor"
10
10
  @mousedown="initInteraction"
11
11
  >
12
12
  <slot name="label"></slot>
13
- </LabelSlotWrapper>
13
+ </label-slot-wrapper>
14
14
 
15
- <LabelWrapper v-if="labelText">
16
- <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
15
+ <label-wrapper v-if="labelText">
16
+ <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
17
17
  {{ labelText }}
18
- </LabelText>
18
+ </label-text>
19
19
 
20
- <InfoText
20
+ <info-text
21
21
  v-if="labelInfoText"
22
- :align-arrow="labelInfoAlign"
23
22
  :text="labelInfoText"
23
+ :alignArrow="labelInfoAlign"
24
24
  />
25
- </LabelWrapper>
26
- <InputWrapper>
27
- <InputContainer
25
+ </label-wrapper>
26
+ <input-wrapper>
27
+ <input-container
28
28
  v-bind="$attrs"
29
29
  ref="inputField1"
30
- :align-items="alignItems"
31
- :background-color="backgroundColor"
32
- :border-color="borderColor"
33
- :data-id="inputDataId"
34
- :disabled="disabled"
35
- :font-color="fontColor"
36
- :font-size="fontSize"
37
- :has-label-slot="hasLabelSlot"
38
- :has-slot="hasSlot"
39
- :has-unit="unitName && !!unitName.length"
40
- :input-height="inputHeight"
41
- :is-disabled="disabled"
42
- :is-error="isError"
43
- :is-interactive="isInteractive"
44
- :min-width="minWidth"
45
- :no-border="noBorder"
30
+ :hasUnit="unitName && !!unitName.length"
46
31
  :placeholder="displayedPlaceholder"
47
- :show-linear-unit-name="showLinearUnitName"
48
- :slot-size="slotSize"
49
- :text-align="textAlign"
32
+ :isError="isError"
33
+ :inputHeight="inputHeight"
34
+ :minWidth="minWidth"
35
+ :isInteractive="isInteractive"
50
36
  :value="formatWithCurrency(value)"
51
37
  @blur="onInputBlur($event)"
52
38
  @focus="focusInput()"
53
- @input="onInput($event)"
54
39
  @keyup.enter="onEnterPress"
40
+ @input="onInput($event)"
41
+ :disabled="disabled"
42
+ :isDisabled="disabled"
43
+ :alignItems="alignItems"
44
+ :noBorder="noBorder"
45
+ :borderColor="borderColor"
46
+ :textAlign="textAlign"
47
+ :fontSize="fontSize"
48
+ :fontColor="fontColor"
49
+ :backgroundColor="backgroundColor"
50
+ :hasSlot="hasSlot"
51
+ :hasLabelSlot="hasLabelSlot"
52
+ :slotSize="slotSize"
53
+ :showLinearUnitName="showLinearUnitName"
54
+ :data-id="inputDataId"
55
55
  />
56
- <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
56
+ <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
57
57
  <slot></slot>
58
- </SlotContainer>
58
+ </slot-container>
59
59
 
60
- <UnitContainer
60
+ <unit-container
61
61
  v-if="unitName && showLinearUnitName && !hasSlot"
62
- :has-length="!!textInput.length"
63
- :is-error="isError"
62
+ :hasLength="!!textInput.length"
63
+ :isError="isError"
64
+ >{{ unitName }}</unit-container
64
65
  >
65
- {{ unitName }}
66
- </UnitContainer>
67
- <IconWrapper v-if="isError && !showLinearUnitName" size="16px">
68
- <Icon cursor="default" name="warning" size="16px" />
69
- </IconWrapper>
70
- </InputWrapper>
71
- <ErrorMessage v-if="isError">
72
- {{ errorMessage }}
73
- </ErrorMessage>
74
- </Container>
66
+ <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
67
+ <icon name="warning" size="16px" cursor="default" />
68
+ </icon-wrapper>
69
+ </input-wrapper>
70
+ <error-message v-if="isError">{{ errorMessage }}</error-message>
71
+ </container>
75
72
  </template>
76
73
 
77
74
  <script>
78
- // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
79
- //This component should be used for questions with input fields only
80
- //How to use:
81
- // <input-number
82
- // placeholder="Enter distance"
83
- // :isError="false" //default is false
84
- // inputWidth="150px" //by default, this is 100%
85
- // minWidth="100px"
86
- // :numberPrecision="3"
87
- // minDecimals="2"
88
- // unitName="pc"
89
- // :value="inputValue" //required -- String
90
- // @input-change="onInputChange($event)" //required
91
- // @on-enter-click="onInputSubmit()"
92
- // :errorMessage="Enter a number between 1 and 10"
93
- // :disabled="false"
94
- // :noBorder="true"
95
- // textAlign="left" // "left, right, center"
96
- // :showLinearUnitName="true"
97
- // fontSize="13px"
98
- // labelText="Number of Modules"
99
- // labelInfoText="Here is some information for you..."
100
- // labelInfoAlign="left"
101
- // :minNumber="0"
102
- // fontColor="blue"
103
- // >
104
- //<template name=label><img>....</template>
105
- //</inputNumber>
106
- import styled from 'vue3-styled-components'
107
- import {
108
- stringToNumber,
109
- numberToString,
110
- } from '../../../helpers/numberConverter'
111
- import InfoText from '../../infoText'
112
- import ErrorMessage from '../../errorMessage'
113
- import warningIcon from '../../../assets/icons/error_icon.png'
114
- import Icon from '../../icon'
75
+ // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
76
+ //This component should be used for questions with input fields only
77
+ //How to use:
78
+ // <input-number
79
+ // placeholder="Enter distance"
80
+ // :isError="false" //default is false
81
+ // inputWidth="150px" //by default, this is 100%
82
+ // minWidth="100px"
83
+ // :numberPrecision="3"
84
+ // minDecimals="2"
85
+ // unitName="pc"
86
+ // :value="inputValue" //required -- String
87
+ // @input-change="onInputChange($event)" //required
88
+ // @on-enter-click="onInputSubmit()"
89
+ // :errorMessage="Enter a number between 1 and 10"
90
+ // :disabled="false"
91
+ // :noBorder="true"
92
+ // textAlign="left" // "left, right, center"
93
+ // :showLinearUnitName="true"
94
+ // fontSize="13px"
95
+ // labelText="Number of Modules"
96
+ // labelInfoText="Here is some information for you..."
97
+ // labelInfoAlign="left"
98
+ // :minNumber="0"
99
+ // fontColor="blue"
100
+ // >
101
+ //<template name=label><img>....</template>
102
+ //</inputNumber>
103
+ import styled from 'vue3-styled-components'
104
+ import {
105
+ stringToNumber,
106
+ numberToString
107
+ } from '../../../helpers/numberConverter'
108
+ import InfoText from '../../infoText'
109
+ import ErrorMessage from '../../errorMessage'
110
+ import warningIcon from '../../../assets/icons/error_icon.png'
111
+ import Icon from '../../icon'
115
112
 
116
- const inputProps = {
117
- isError: Boolean,
118
- hasUnit: Boolean,
119
- inputWidth: String,
120
- minWidth: String,
121
- isDisabled: Boolean,
122
- noBorder: Boolean,
123
- textAlign: String,
124
- fontSize: String,
125
- fontColor: String,
126
- backgroundColor: String,
127
- hasSlot: Boolean,
128
- hasLabelSlot: Boolean,
129
- slotSize: String,
130
- inputHeight: String,
131
- isInteractive: Boolean,
132
- alignItems: String,
133
- labelFontColor: String,
134
- borderColor: String,
135
- showLinearUnitName: Boolean,
136
- }
113
+ const inputProps = {
114
+ isError: Boolean,
115
+ hasUnit: Boolean,
116
+ inputWidth: String,
117
+ minWidth: String,
118
+ isDisabled: Boolean,
119
+ noBorder: Boolean,
120
+ textAlign: String,
121
+ fontSize: String,
122
+ fontColor: String,
123
+ backgroundColor: String,
124
+ hasSlot: Boolean,
125
+ hasLabelSlot: Boolean,
126
+ slotSize: String,
127
+ inputHeight: String,
128
+ isInteractive: Boolean,
129
+ alignItems: String,
130
+ labelFontColor: String,
131
+ borderColor: String,
132
+ showLinearUnitName: Boolean
133
+ }
137
134
 
138
- const Container = styled('div', inputProps)`
139
- width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
140
- position: relative;
141
- display: grid;
142
- grid-template-columns: ${(props) =>
143
- props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
144
- `
135
+ const Container = styled('div', inputProps)`
136
+ width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
137
+ position: relative;
138
+ display: grid;
139
+ grid-template-columns: ${(props) =>
140
+ props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
141
+ `
145
142
 
146
- const InputContainer = styled('input', inputProps)`
147
- border: ${(props) =>
148
- props.isError
149
- ? '1px solid ' + props.theme.colors.red
150
- : props.noBorder
151
- ? 'none'
152
- : props.borderColor
153
- ? props.theme.colors[props.borderColor]
154
- ? '1px solid ' + props.theme.colors[props.borderColor]
155
- : '1px solid ' + props.borderColor
156
- : '1px solid ' + props.theme.colors.grey4};
157
- height: ${(props) => props.inputHeight};
158
- max-height: ${(props) => props.inputHeight};
159
- padding: 0 10px;
160
- padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
161
- slotSize
162
- ? isError && !showLinearUnitName
163
- ? 'calc(' + slotSize + ' + 24px)'
164
- : 'calc(' + slotSize + ' + 10px)'
165
- : isError && !showLinearUnitName
166
- ? '24px'
167
- : '5px'};
168
- border-radius: ${(props) =>
169
- props.isInteractive && props.alignItems != 'vertical'
170
- ? '0 4px 4px 0'
171
- : '4px'};
172
- text-align: ${(props) => props.textAlign};
173
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
174
- font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
175
- color: ${(props) =>
176
- props.isError
177
- ? props.theme.colors.grey6
178
- : props.isDisabled
179
- ? props.theme.colors.grey2
180
- : props.fontColor
181
- ? props.fontColor + ' !important'
182
- : props.theme.colors.black};
183
- background-color: ${(props) =>
184
- props.backgroundColor
185
- ? props.backgroundColor + ' !important'
186
- : props.theme.colors.white};
187
- width: ${(props) =>
188
- props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
189
- min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
190
- background-color: ${(props) =>
191
- props.isDisabled ? props.theme.colors.grey5 : '#fff'};
192
- box-sizing: border-box;
143
+ const InputContainer = styled('input', inputProps)`
144
+ border: ${(props) =>
145
+ props.isError
146
+ ? '1px solid ' + props.theme.colors.red
147
+ : props.noBorder
148
+ ? 'none'
149
+ : props.borderColor
150
+ ? props.theme.colors[props.borderColor]
151
+ ? '1px solid ' + props.theme.colors[props.borderColor]
152
+ : '1px solid ' + props.borderColor
153
+ : '1px solid ' + props.theme.colors.grey4};
154
+ height: ${(props) => props.inputHeight};
155
+ max-height: ${(props) => props.inputHeight};
156
+ padding: 0 10px;
157
+ padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
158
+ slotSize
159
+ ? isError && !showLinearUnitName
160
+ ? 'calc(' + slotSize + ' + 24px)'
161
+ : 'calc(' + slotSize + ' + 10px)'
162
+ : isError && !showLinearUnitName
163
+ ? '24px'
164
+ : '5px'};
165
+ border-radius: ${(props) =>
166
+ props.isInteractive && props.alignItems != 'vertical'
167
+ ? '0 4px 4px 0'
168
+ : '4px'};
169
+ text-align: ${(props) => props.textAlign};
170
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
171
+ font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
172
+ color: ${(props) =>
173
+ props.isError
174
+ ? props.theme.colors.grey6
175
+ : props.isDisabled
176
+ ? props.theme.colors.grey2
177
+ : props.fontColor
178
+ ? props.fontColor + ' !important'
179
+ : props.theme.colors.black};
180
+ background-color: ${(props) =>
181
+ props.backgroundColor
182
+ ? props.backgroundColor + ' !important'
183
+ : props.theme.colors.white};
184
+ width: ${(props) =>
185
+ props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
186
+ min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
187
+ background-color: ${(props) =>
188
+ props.isDisabled ? props.theme.colors.grey5 : '#fff'};
189
+ box-sizing: border-box;
193
190
 
194
- &::placeholder {
195
- color: ${(props) => props.theme.colors.grey2};
196
- }
191
+ &::placeholder {
192
+ color: ${(props) => props.theme.colors.grey2};
193
+ }
197
194
 
198
- &:focus {
199
- outline: none;
200
- }
201
- `
195
+ &:focus {
196
+ outline: none;
197
+ }
198
+ `
202
199
 
203
- const InputWrapper = styled.span`
204
- position: relative;
205
- `
200
+ const InputWrapper = styled.span`
201
+ position: relative;
202
+ `
206
203
 
207
- const UnitContainer = styled('span', inputProps)`
208
- border-left: 1px solid
209
- ${(props) =>
210
- props.isError
211
- ? props.theme.colors.red
212
- : props.hasLength
213
- ? props.theme.colors.black
214
- : props.theme.colors.mediumGray};
215
- position: absolute;
216
- right: 10px;
217
- top: 10px;
218
- padding-left: 10px;
219
- text-align: right;
220
- color: ${(props) =>
204
+ const UnitContainer = styled('span', inputProps)`
205
+ border-left: 1px solid
206
+ ${(props) =>
221
207
  props.isError
222
208
  ? props.theme.colors.red
223
209
  : props.hasLength
224
210
  ? props.theme.colors.black
225
211
  : props.theme.colors.mediumGray};
226
- `
212
+ position: absolute;
213
+ right: 10px;
214
+ top: 10px;
215
+ padding-left: 10px;
216
+ text-align: right;
217
+ color: ${(props) =>
218
+ props.isError
219
+ ? props.theme.colors.red
220
+ : props.hasLength
221
+ ? props.theme.colors.black
222
+ : props.theme.colors.mediumGray};
223
+ `
227
224
 
228
- const SlotContainer = styled('span', inputProps)`
229
- text-align: right;
230
- border-left: 1px solid
231
- ${(props) =>
232
- props.isError
233
- ? props.theme.colors.red
234
- : props.hasLength
235
- ? props.theme.colors.black
236
- : props.theme.colors.mediumGray};
237
- position: absolute;
238
- width: ${(props) =>
239
- props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
240
- right: 10px;
241
- top: 10px;
242
- padding-left: 10px;
243
- color: ${(props) =>
225
+ const SlotContainer = styled('span', inputProps)`
226
+ text-align: right;
227
+ border-left: 1px solid
228
+ ${(props) =>
244
229
  props.isError
245
230
  ? props.theme.colors.red
246
231
  : props.hasLength
247
232
  ? props.theme.colors.black
248
233
  : props.theme.colors.mediumGray};
249
- `
234
+ position: absolute;
235
+ width: ${(props) =>
236
+ props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
237
+ right: 10px;
238
+ top: 10px;
239
+ padding-left: 10px;
240
+ color: ${(props) =>
241
+ props.isError
242
+ ? props.theme.colors.red
243
+ : props.hasLength
244
+ ? props.theme.colors.black
245
+ : props.theme.colors.mediumGray};
246
+ `
250
247
 
251
- const LabelWrapper = styled('div', inputProps)`
252
- display: flex;
253
- align-items: center;
254
- gap: 10px;
255
- margin-bottom: 8px;
256
- cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
257
- `
258
- const LabelSlotWrapper = styled('div', inputProps)`
259
- display: flex;
260
- gap: 10px;
261
- align-items: center;
262
- cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
263
- border: ${(props) =>
264
- props.alignItems == 'vertical'
265
- ? 'none'
266
- : props.isError
267
- ? '1px solid ' + props.theme.colors.red
268
- : props.noBorder
269
- ? 'none'
270
- : props.borderColor
271
- ? props.theme.colors[props.borderColor]
272
- ? '1px solid ' + props.theme.colors[props.borderColor]
273
- : '1px solid ' + props.borderColor
274
- : '1px solid ' + props.theme.colors.grey4};
275
- border-radius: 4px 0 0 4px;
276
- border-right: none;
277
- `
248
+ const LabelWrapper = styled('div', inputProps)`
249
+ display: flex;
250
+ align-items: center;
251
+ gap: 10px;
252
+ margin-bottom: 8px;
253
+ cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
254
+ `
255
+ const LabelSlotWrapper = styled('div', inputProps)`
256
+ display: flex;
257
+ gap: 10px;
258
+ align-items: center;
259
+ cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
260
+ border: ${(props) =>
261
+ props.alignItems == 'vertical'
262
+ ? 'none'
263
+ : props.isError
264
+ ? '1px solid ' + props.theme.colors.red
265
+ : props.noBorder
266
+ ? 'none'
267
+ : props.borderColor
268
+ ? props.theme.colors[props.borderColor]
269
+ ? '1px solid ' + props.theme.colors[props.borderColor]
270
+ : '1px solid ' + props.borderColor
271
+ : '1px solid ' + props.theme.colors.grey4};
272
+ border-radius: 4px 0 0 4px;
273
+ border-right: none;
274
+ `
278
275
 
279
- const LabelText = styled('div', inputProps)`
280
- font-size: 13px;
281
- color: ${(props) =>
282
- props.theme.colors[props.labelFontColor]
283
- ? props.theme.colors[props.labelFontColor]
284
- : props.labelFontColor};
285
- font-weight: 700;
286
- `
276
+ const LabelText = styled('div', inputProps)`
277
+ font-size: 13px;
278
+ color: ${(props) =>
279
+ props.theme.colors[props.labelFontColor]
280
+ ? props.theme.colors[props.labelFontColor]
281
+ : props.labelFontColor};
282
+ font-weight: 700;
283
+ `
287
284
 
288
- const IconAttrs = { size: String }
289
- const IconWrapper = styled('div', IconAttrs)`
290
- position: absolute;
291
- top: 0;
292
- bottom: 0;
293
- margin: auto;
294
- right: 5px;
295
- height: ${(props) => (props.size ? props.size : 'auto')};
296
- `
285
+ const IconAttrs = { size: String }
286
+ const IconWrapper = styled('div', IconAttrs)`
287
+ position: absolute;
288
+ top: 0;
289
+ bottom: 0;
290
+ margin: auto;
291
+ right: 5px;
292
+ height: ${(props) => (props.size ? props.size : 'auto')};
293
+ `
297
294
 
298
- export default {
299
- name: 'InputNumber',
300
- components: {
301
- Container,
302
- InputContainer,
303
- InputWrapper,
304
- UnitContainer,
305
- ErrorMessage,
306
- LabelWrapper,
307
- LabelSlotWrapper,
308
- LabelText,
309
- InfoText,
310
- Icon,
311
- SlotContainer,
312
- IconWrapper,
313
- },
314
- inheritAttrs: false,
315
- props: {
316
- placeholder: {
317
- required: false,
318
- default: '',
319
- },
320
- isError: {
321
- required: false,
322
- default: false,
323
- },
324
- inputWidth: {
325
- required: false,
326
- default: null,
327
- },
328
- minWidth: {
329
- required: false,
330
- default: null,
331
- },
332
- inputHeight: {
333
- required: false,
334
- default: '40px',
335
- },
336
- value: {
337
- required: true,
338
- default: null,
339
- },
340
- clearInput: {
341
- required: false,
342
- default: false,
343
- },
344
- alignItems: {
345
- required: false,
346
- default: 'vertical',
347
- },
348
- errorMessage: {
349
- required: false,
350
- default: 'Please insert a correct number',
351
- },
352
- numberPrecision: {
353
- required: false,
354
- default: 0,
355
- },
356
- minDecimals: {
357
- required: false,
358
- default: 0,
359
- },
360
- unitName: {
361
- required: false,
362
- default: '',
363
- },
364
- showLinearUnitName: {
365
- required: false,
366
- default: false,
367
- },
368
- disabled: {
369
- required: false,
370
- default: false,
371
- },
372
- noBorder: {
373
- required: false,
374
- default: false,
375
- },
376
- borderColor: {
377
- required: false,
378
- },
379
- textAlign: {
380
- required: false,
381
- default: 'left',
382
- },
383
- fontSize: {
384
- required: false,
385
- default: '13px',
386
- },
387
- isInteractive: {
388
- required: false,
389
- default: false,
390
- },
391
- interactionStep: {
392
- required: false,
393
- default: 1,
394
- },
395
- labelText: {
396
- required: false,
397
- default: null,
398
- },
399
- labelInfoText: {
400
- required: false,
401
- default: null,
402
- },
403
- labelInfoAlign: {
404
- required: false,
405
- default: 'left',
406
- },
407
- defaultNumber: {
408
- required: false,
409
- default: null,
410
- },
411
- minNumber: {
412
- required: false,
413
- default: null,
414
- },
415
- fontColor: {
416
- required: false,
417
- default: null,
418
- },
419
- backgroundColor: {
420
- required: false,
421
- default: null,
422
- },
423
- numberToStringEnabled: {
424
- required: false,
425
- default: true,
426
- },
427
- allowNegative: {
428
- required: false,
429
- default: true,
430
- },
431
- slotSize: {
432
- required: false,
433
- },
434
- labelFontColor: {
435
- required: false,
436
- default: 'eturnityGrey',
437
- },
438
- focus: {
439
- required: false,
440
- default: false,
441
- },
442
- labelDataId: {
443
- required: false,
444
- default: '',
445
- },
446
- inputDataId: {
447
- required: false,
448
- default: '',
449
- },
450
- },
451
- data() {
452
- return {
453
- textInput: '',
454
- isFocused: false,
455
- warningIcon: warningIcon,
295
+ export default {
296
+ name: 'input-number',
297
+ components: {
298
+ Container,
299
+ InputContainer,
300
+ InputWrapper,
301
+ UnitContainer,
302
+ ErrorMessage,
303
+ LabelWrapper,
304
+ LabelSlotWrapper,
305
+ LabelText,
306
+ InfoText,
307
+ Icon,
308
+ SlotContainer,
309
+ IconWrapper
310
+ },
311
+ inheritAttrs: false,
312
+ data() {
313
+ return {
314
+ textInput: '',
315
+ isFocused: false,
316
+ warningIcon: warningIcon
317
+ }
318
+ },
319
+ props: {
320
+ placeholder: {
321
+ required: false,
322
+ default: ''
323
+ },
324
+ isError: {
325
+ required: false,
326
+ default: false
327
+ },
328
+ inputWidth: {
329
+ required: false,
330
+ default: null
331
+ },
332
+ minWidth: {
333
+ required: false,
334
+ default: null
335
+ },
336
+ inputHeight: {
337
+ required: false,
338
+ default: '40px'
339
+ },
340
+ value: {
341
+ required: true,
342
+ default: null
343
+ },
344
+ clearInput: {
345
+ required: false,
346
+ default: false
347
+ },
348
+ alignItems: {
349
+ required: false,
350
+ default: 'vertical'
351
+ },
352
+ errorMessage: {
353
+ required: false,
354
+ default: 'Please insert a correct number'
355
+ },
356
+ numberPrecision: {
357
+ required: false,
358
+ default: 0
359
+ },
360
+ minDecimals: {
361
+ required: false,
362
+ default: 0
363
+ },
364
+ unitName: {
365
+ required: false,
366
+ default: ''
367
+ },
368
+ showLinearUnitName: {
369
+ required: false,
370
+ default: false
371
+ },
372
+ disabled: {
373
+ required: false,
374
+ default: false
375
+ },
376
+ noBorder: {
377
+ required: false,
378
+ default: false
379
+ },
380
+ borderColor: {
381
+ required: false
382
+ },
383
+ textAlign: {
384
+ required: false,
385
+ default: 'left'
386
+ },
387
+ fontSize: {
388
+ required: false,
389
+ default: '13px'
390
+ },
391
+ isInteractive: {
392
+ required: false,
393
+ default: false
394
+ },
395
+ interactionStep: {
396
+ required: false,
397
+ default: 1
398
+ },
399
+ labelText: {
400
+ required: false,
401
+ default: null
402
+ },
403
+ labelInfoText: {
404
+ required: false,
405
+ default: null
406
+ },
407
+ labelInfoAlign: {
408
+ required: false,
409
+ default: 'left'
410
+ },
411
+ defaultNumber: {
412
+ required: false,
413
+ default: null
414
+ },
415
+ minNumber: {
416
+ required: false,
417
+ default: null
418
+ },
419
+ fontColor: {
420
+ required: false,
421
+ default: null
422
+ },
423
+ backgroundColor: {
424
+ required: false,
425
+ default: null
426
+ },
427
+ numberToStringEnabled: {
428
+ required: false,
429
+ default: true
430
+ },
431
+ allowNegative: {
432
+ required: false,
433
+ default: true
434
+ },
435
+ slotSize: {
436
+ required: false
437
+ },
438
+ labelFontColor: {
439
+ required: false,
440
+ default: 'eturnityGrey'
441
+ },
442
+ focus: {
443
+ required: false,
444
+ default: false
445
+ },
446
+ labelDataId: {
447
+ required: false,
448
+ default: ''
449
+ },
450
+ inputDataId: {
451
+ required: false,
452
+ default: ''
453
+ }
454
+ },
455
+ computed: {
456
+ displayedPlaceholder() {
457
+ if (this.placeholder) return this.placeholder
458
+ if (this.defaultNumber)
459
+ return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
460
+ return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
461
+ },
462
+ hasSlot() {
463
+ return !!this.$slots.default
464
+ },
465
+ hasLabelSlot() {
466
+ return !!this.$slots.label
467
+ }
468
+ },
469
+ methods: {
470
+ onEnterPress() {
471
+ this.$emit('on-enter-click')
472
+ this.$refs.inputField1.$el.blur()
473
+ },
474
+ onChangeHandler(event) {
475
+ if (isNaN(event) || event === '') {
476
+ event = this.defaultNumber
477
+ ? this.defaultNumber
478
+ : this.minNumber || this.minNumber === 0
479
+ ? this.minNumber
480
+ : event
481
+ }
482
+ if (!this.allowNegative) {
483
+ event = Math.abs(event)
456
484
  }
485
+ event = parseFloat(event)
486
+ // Need to return an integer rather than a string
487
+ this.$emit('input-change', event)
457
488
  },
458
- computed: {
459
- displayedPlaceholder() {
460
- if (this.placeholder) return this.placeholder
461
- if (this.defaultNumber)
462
- return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
463
- return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
464
- },
465
- hasSlot() {
466
- return !!this.$slots.default
467
- },
468
- hasLabelSlot() {
469
- return !!this.$slots.label
470
- },
471
- },
472
- watch: {
473
- focus(value) {
474
- if (value) {
475
- this.focusInput()
476
- }
477
- },
478
- clearInput: function (value) {
479
- if (value) {
480
- // If the value is typed, then we should clear the textInput on Continue
481
- this.textInput = ''
489
+ onEvaluateCode(event) {
490
+ // function to perform math on the code
491
+ // filter the string in case of any malicious content
492
+ const val = event.target.value
493
+ let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
494
+ filtered = filtered.split(/([-+*/()])/)
495
+ let formatted = filtered.map((item) => {
496
+ if (
497
+ item === '+' ||
498
+ item === '-' ||
499
+ item === '*' ||
500
+ item === '/' ||
501
+ item === '(' ||
502
+ item === ')' ||
503
+ item === ''
504
+ ) {
505
+ return item
506
+ } else {
507
+ let num = stringToNumber({
508
+ value: item,
509
+ numberPrecision: false,
510
+ minDecimals: this.minDecimals
511
+ })
512
+ return num
482
513
  }
483
- },
484
- },
485
- created() {
486
- if (this.value) {
487
- this.textInput = numberToString({
488
- value: this.value,
514
+ })
515
+ let evaluated
516
+ formatted = this.removeStringItemsAfterLastNumber(formatted)
517
+ evaluated = eval(formatted.join(' '))
518
+ if (typeof evaluated === 'string') {
519
+ evaluated = stringToNumber({
520
+ value: evaluated,
489
521
  numberPrecision: this.numberPrecision,
490
- minDecimals: this.minDecimals,
522
+ minDecimals: this.minDecimals
491
523
  })
492
- } else if (this.defaultNumber !== null) {
493
- this.textInput = numberToString({
494
- value: this.defaultNumber,
495
- numberPrecision: this.numberPrecision,
496
- minDecimals: this.minDecimals,
497
- })
498
- } else if (this.minNumber !== null) {
524
+ } else if (typeof evaluated === 'number') {
525
+ evaluated = evaluated.toFixed(this.numberPrecision)
526
+ }
527
+ return evaluated
528
+ },
529
+ removeStringItemsAfterLastNumber(array) {
530
+ // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
531
+ let lastNumberIndex = -1
532
+ // Find the index of the last number in the array
533
+ for (let i = array.length - 1; i >= 0; i--) {
534
+ if (typeof array[i] === 'number') {
535
+ lastNumberIndex = i
536
+ break
537
+ }
538
+ }
539
+ // if there are no numbers, return an empty array
540
+ if (lastNumberIndex === -1) {
541
+ return []
542
+ }
543
+ // Remove non-numeric items after the last number
544
+ if (lastNumberIndex !== -1) {
545
+ const newArray = array.slice(0, lastNumberIndex + 1)
546
+ return newArray
547
+ }
548
+ return array
549
+ },
550
+ onInput(event) {
551
+ if (!this.isFocused) {
552
+ return
553
+ }
554
+ if (event.target.value === '') {
555
+ this.$emit('on-input', '')
556
+ }
557
+ let evaluatedVal
558
+ try {
559
+ evaluatedVal = this.onEvaluateCode(event)
560
+ } finally {
561
+ if (evaluatedVal && this.value != evaluatedVal) {
562
+ this.$emit('on-input', evaluatedVal)
563
+ }
564
+ }
565
+ },
566
+ onInputBlur(e) {
567
+ this.isFocused = false
568
+ let value = e.target.value
569
+ let evaluatedInput = this.onEvaluateCode(e)
570
+ this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
571
+ if ((evaluatedInput && value.length) || this.minNumber !== null) {
499
572
  this.textInput = numberToString({
500
- value: this.minNumber,
573
+ value:
574
+ evaluatedInput && value.length
575
+ ? evaluatedInput
576
+ : this.defaultNumber
577
+ ? this.defaultNumber
578
+ : this.minNumber,
501
579
  numberPrecision: this.numberPrecision,
502
- minDecimals: this.minDecimals,
580
+ minDecimals: this.minDecimals
503
581
  })
504
582
  }
583
+ let adjustedMinValue =
584
+ evaluatedInput && evaluatedInput.length
585
+ ? evaluatedInput
586
+ : this.defaultNumber
587
+ ? this.defaultNumber
588
+ : this.minNumber || this.minNumber === 0
589
+ ? this.minNumber
590
+ : ''
591
+ this.$emit('input-blur', adjustedMinValue)
505
592
  },
506
- mounted() {
507
- if (this.focus) {
508
- this.focusInput()
593
+ focusInput() {
594
+ if (this.disabled) {
595
+ return
509
596
  }
597
+ this.isFocused = true
598
+ this.$nextTick(() => {
599
+ this.$refs.inputField1.$el.select()
600
+ })
601
+ this.$emit('input-focus')
510
602
  },
511
- methods: {
512
- onEnterPress() {
513
- this.$emit('on-enter-click')
603
+ blurInput() {
604
+ if (this.disabled) {
605
+ return
606
+ }
607
+ this.isFocused = false
608
+ this.$nextTick(() => {
514
609
  this.$refs.inputField1.$el.blur()
515
- },
516
- onChangeHandler(event) {
517
- if (isNaN(event) || event === '') {
518
- event = this.defaultNumber
519
- ? this.defaultNumber
520
- : this.minNumber || this.minNumber === 0
521
- ? this.minNumber
522
- : event
523
- }
524
- if (!this.allowNegative) {
525
- event = Math.abs(event)
526
- }
527
- event = parseFloat(event)
528
- // Need to return an integer rather than a string
529
- this.$emit('input-change', event)
530
- },
531
- onEvaluateCode(event) {
532
- // function to perform math on the code
533
- // filter the string in case of any malicious content
534
- const val = event.target.value
535
- let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
536
- filtered = filtered.split(/([-+*/()])/)
537
- let formatted = filtered.map((item) => {
538
- if (
539
- item === '+' ||
540
- item === '-' ||
541
- item === '*' ||
542
- item === '/' ||
543
- item === '(' ||
544
- item === ')' ||
545
- item === ''
546
- ) {
547
- return item
548
- } else {
549
- let num = stringToNumber({
550
- value: item,
551
- numberPrecision: false,
552
- minDecimals: this.minDecimals,
610
+ })
611
+ },
612
+ formatWithCurrency(value) {
613
+ let adjustedMinValue =
614
+ value || value === 0
615
+ ? value
616
+ : this.defaultNumber
617
+ ? this.defaultNumber
618
+ : this.minNumber || this.minNumber === 0
619
+ ? this.minNumber
620
+ : ''
621
+ if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
622
+ let input = this.numberToStringEnabled
623
+ ? numberToString({
624
+ value: adjustedMinValue,
625
+ numberPrecision: this.numberPrecision,
626
+ minDecimals: this.minDecimals
553
627
  })
554
- return num
555
- }
556
- })
557
- let evaluated
558
- formatted = this.removeStringItemsAfterLastNumber(formatted)
559
- evaluated = eval(formatted.join(' '))
560
- if (typeof evaluated === 'string') {
561
- evaluated = stringToNumber({
562
- value: evaluated,
563
- numberPrecision: this.numberPrecision,
564
- minDecimals: this.minDecimals,
565
- })
566
- } else if (typeof evaluated === 'number') {
567
- evaluated = evaluated.toFixed(this.numberPrecision)
568
- }
569
- return evaluated
570
- },
571
- removeStringItemsAfterLastNumber(array) {
572
- // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
573
- let lastNumberIndex = -1
574
- // Find the index of the last number in the array
575
- for (let i = array.length - 1; i >= 0; i--) {
576
- if (typeof array[i] === 'number') {
577
- lastNumberIndex = i
578
- break
579
- }
580
- }
581
- // if there are no numbers, return an empty array
582
- if (lastNumberIndex === -1) {
583
- return []
584
- }
585
- // Remove non-numeric items after the last number
586
- if (lastNumberIndex !== -1) {
587
- const newArray = array.slice(0, lastNumberIndex + 1)
588
- return newArray
589
- }
590
- return array
591
- },
592
- onInput(event) {
593
- if (!this.isFocused) {
594
- return
595
- }
596
- if (event.target.value === '') {
597
- this.$emit('on-input', '')
598
- }
599
- let evaluatedVal
600
- try {
601
- evaluatedVal = this.onEvaluateCode(event)
602
- } finally {
603
- if (evaluatedVal && this.value != evaluatedVal) {
604
- this.$emit('on-input', evaluatedVal)
605
- }
606
- }
607
- },
608
- onInputBlur(e) {
609
- this.isFocused = false
610
- let value = e.target.value
611
- let evaluatedInput = this.onEvaluateCode(e)
612
- this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
613
- if ((evaluatedInput && value.length) || this.minNumber !== null) {
614
- this.textInput = numberToString({
615
- value:
616
- evaluatedInput && value.length
617
- ? evaluatedInput
618
- : this.defaultNumber
619
- ? this.defaultNumber
620
- : this.minNumber,
621
- numberPrecision: this.numberPrecision,
622
- minDecimals: this.minDecimals,
623
- })
624
- }
625
- let adjustedMinValue =
626
- evaluatedInput && evaluatedInput.length
627
- ? evaluatedInput
628
- : this.defaultNumber
629
- ? this.defaultNumber
630
- : this.minNumber || this.minNumber === 0
631
- ? this.minNumber
632
- : ''
633
- this.$emit('input-blur', adjustedMinValue)
634
- },
635
- focusInput() {
636
- if (this.disabled) {
637
- return
638
- }
639
- this.isFocused = true
640
- this.$nextTick(() => {
641
- this.$refs.inputField1.$el.select()
642
- })
643
- this.$emit('input-focus')
644
- },
645
- blurInput() {
646
- if (this.disabled) {
647
- return
648
- }
649
- this.isFocused = false
650
- this.$nextTick(() => {
651
- this.$refs.inputField1.$el.blur()
652
- })
653
- },
654
- formatWithCurrency(value) {
655
- let adjustedMinValue =
656
- value || value === 0
657
- ? value
658
- : this.defaultNumber
659
- ? this.defaultNumber
660
- : this.minNumber || this.minNumber === 0
661
- ? this.minNumber
662
- : ''
663
- if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
664
- let input = this.numberToStringEnabled
665
- ? numberToString({
666
- value: adjustedMinValue,
667
- numberPrecision: this.numberPrecision,
668
- minDecimals: this.minDecimals,
669
- })
670
- : adjustedMinValue
671
- let unit = this.showLinearUnitName ? '' : this.unitName
672
- //return input + ' ' + unit
673
- return input + ' ' + unit
674
- } else if (!adjustedMinValue && adjustedMinValue !== 0) {
675
- return ''
676
- } else {
677
- return this.numberToStringEnabled
678
- ? numberToString({
679
- value: adjustedMinValue,
680
- numberPrecision: this.numberPrecision,
681
- minDecimals: this.minDecimals,
682
- })
683
- : adjustedMinValue
684
- }
685
- },
686
- initInteraction(e) {
687
- this.focusInput()
688
- e.preventDefault()
689
- window.addEventListener('mousemove', this.interact, false)
690
- window.addEventListener('mouseup', this.stopInteract, false)
691
- },
692
- interact(e) {
693
- e.preventDefault()
694
- let value = parseFloat(this.value || 0)
695
- value += parseFloat(this.interactionStep) * parseInt(e.movementX)
696
- this.$emit('on-input-drag', value)
628
+ : adjustedMinValue
629
+ let unit = this.showLinearUnitName ? '' : this.unitName
630
+ //return input + ' ' + unit
631
+ return input + ' ' + unit
632
+ } else if (!adjustedMinValue && adjustedMinValue !== 0) {
633
+ return ''
634
+ } else {
635
+ return this.numberToStringEnabled
636
+ ? numberToString({
637
+ value: adjustedMinValue,
638
+ numberPrecision: this.numberPrecision,
639
+ minDecimals: this.minDecimals
640
+ })
641
+ : adjustedMinValue
642
+ }
643
+ },
644
+ initInteraction(e) {
645
+ this.focusInput()
646
+ e.preventDefault()
647
+ window.addEventListener('mousemove', this.interact, false)
648
+ window.addEventListener('mouseup', this.stopInteract, false)
649
+ },
650
+ interact(e) {
651
+ e.preventDefault()
652
+ let value = parseFloat(this.value || 0)
653
+ value += parseFloat(this.interactionStep) * parseInt(e.movementX)
654
+ this.$emit('on-input-drag', value)
697
655
 
698
- this.textInput = numberToString({
699
- value: value && value.length ? value : this.minNumber,
700
- numberPrecision: this.numberPrecision,
701
- minDecimals: this.minDecimals,
702
- })
703
- //this.value=value
704
- },
705
- stopInteract(e) {
706
- e.preventDefault()
707
- window.removeEventListener('mousemove', this.interact, false)
708
- window.removeEventListener('mouseup', this.stopInteract, false)
709
- this.blurInput()
710
- },
656
+ this.textInput = numberToString({
657
+ value: value && value.length ? value : this.minNumber,
658
+ numberPrecision: this.numberPrecision,
659
+ minDecimals: this.minDecimals
660
+ })
661
+ //this.value=value
711
662
  },
663
+ stopInteract(e) {
664
+ e.preventDefault()
665
+ window.removeEventListener('mousemove', this.interact, false)
666
+ window.removeEventListener('mouseup', this.stopInteract, false)
667
+ this.blurInput()
668
+ }
669
+ },
670
+ created() {
671
+ if (this.value) {
672
+ this.textInput = numberToString({
673
+ value: this.value,
674
+ numberPrecision: this.numberPrecision,
675
+ minDecimals: this.minDecimals
676
+ })
677
+ } else if (this.defaultNumber !== null) {
678
+ this.textInput = numberToString({
679
+ value: this.defaultNumber,
680
+ numberPrecision: this.numberPrecision,
681
+ minDecimals: this.minDecimals
682
+ })
683
+ } else if (this.minNumber !== null) {
684
+ this.textInput = numberToString({
685
+ value: this.minNumber,
686
+ numberPrecision: this.numberPrecision,
687
+ minDecimals: this.minDecimals
688
+ })
689
+ }
690
+ },
691
+ mounted() {
692
+ if (this.focus) {
693
+ this.focusInput()
694
+ }
695
+ },
696
+ watch: {
697
+ focus(value) {
698
+ if (value) {
699
+ this.focusInput()
700
+ }
701
+ },
702
+ clearInput: function (value) {
703
+ if (value) {
704
+ // If the value is typed, then we should clear the textInput on Continue
705
+ this.textInput = ''
706
+ }
707
+ }
712
708
  }
709
+ }
713
710
  </script>