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