@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.
- package/.eslintrc.js +184 -0
- package/.prettierrc +8 -6
- package/package.json +9 -21
- package/src/App.vue +79 -78
- package/src/assets/theme.js +3 -3
- package/src/components/addNewButton/AddNewButton.stories.js +2 -2
- package/src/components/addNewButton/index.vue +48 -51
- package/src/components/banner/actionBanner/index.vue +54 -55
- package/src/components/banner/banner/banner.stories.js +5 -5
- package/src/components/banner/banner/index.vue +159 -159
- package/src/components/banner/infoBanner/index.vue +41 -53
- package/src/components/buttons/buttonIcon/index.vue +125 -122
- package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
- package/src/components/buttons/closeButton/index.vue +49 -49
- package/src/components/buttons/mainButton/index.vue +108 -108
- package/src/components/card/index.vue +70 -70
- package/src/components/collapsableInfoText/index.vue +96 -94
- package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
- package/src/components/deleteIcon/index.vue +54 -54
- package/src/components/draggableInputHandle/index.vue +37 -37
- package/src/components/dropdown/Dropdown.stories.js +9 -10
- package/src/components/dropdown/index.vue +106 -106
- package/src/components/errorMessage/index.vue +52 -52
- package/src/components/filter/filterSettings.vue +428 -422
- package/src/components/filter/index.vue +135 -135
- package/src/components/filter/parentDropdown.vue +73 -73
- package/src/components/icon/Icons.stories.js +7 -7
- package/src/components/icon/iconCollection.vue +53 -53
- package/src/components/icon/index.vue +122 -122
- package/src/components/iconWrapper/index.vue +156 -156
- package/src/components/infoCard/index.vue +30 -32
- package/src/components/infoText/index.vue +142 -137
- package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
- package/src/components/inputs/checkbox/index.vue +190 -180
- package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
- package/src/components/inputs/inputNumber/index.vue +696 -696
- package/src/components/inputs/inputNumberQuestion/index.vue +185 -182
- package/src/components/inputs/inputText/InputText.stories.js +22 -22
- package/src/components/inputs/inputText/index.vue +337 -336
- package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
- package/src/components/inputs/radioButton/index.vue +222 -219
- package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
- package/src/components/inputs/searchInput/index.vue +127 -126
- package/src/components/inputs/select/index.vue +792 -791
- package/src/components/inputs/select/option/index.vue +124 -124
- package/src/components/inputs/select/select.stories.js +31 -32
- package/src/components/inputs/slider/index.vue +99 -99
- package/src/components/inputs/switchField/index.vue +220 -222
- package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
- package/src/components/inputs/textAreaInput/index.vue +171 -173
- package/src/components/inputs/toggle/Toggle.stories.js +14 -14
- package/src/components/inputs/toggle/index.vue +214 -217
- package/src/components/label/index.vue +82 -82
- package/src/components/markerItem/index.vue +68 -66
- package/src/components/modals/actionModal/index.vue +54 -54
- package/src/components/modals/infoModal/index.vue +39 -36
- package/src/components/modals/modal/index.vue +134 -134
- package/src/components/modals/modal/modal.stories.js +5 -5
- package/src/components/navigationTabs/index.vue +96 -94
- package/src/components/pageSubtitle/index.vue +55 -49
- package/src/components/pageTitle/index.vue +56 -56
- package/src/components/pagination/index.vue +92 -89
- package/src/components/progressBar/index.vue +107 -107
- package/src/components/projectMarker/index.vue +246 -244
- package/src/components/rangeSlider/Slider.vue +491 -465
- package/src/components/rangeSlider/index.vue +410 -410
- package/src/components/rangeSlider/utils/dom.js +5 -5
- package/src/components/selectedOptions/index.vue +119 -119
- package/src/components/sideMenu/index.vue +199 -199
- package/src/components/spinner/index.vue +57 -57
- package/src/components/tableDropdown/index.vue +520 -520
- package/src/components/tables/mainTable/index.vue +417 -400
- package/src/components/tables/viewTable/index.vue +171 -171
- package/src/components/threeDots/index.vue +340 -334
- package/src/components/videoThumbnail/index.vue +86 -86
- package/src/components/videoThumbnail/videoThumbnail.stories.js +14 -16
- package/src/helpers/numberConverter.js +2 -2
- package/src/helpers/translateLang.js +9 -9
- package/src/mixins/inputValidations.js +5 -5
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
@@ -1,84 +1,84 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
<
|
2
|
+
<Container :align-items="alignItems" :input-width="inputWidth">
|
3
|
+
<LabelSlotWrapper
|
4
4
|
v-if="hasLabelSlot"
|
5
|
-
:
|
6
|
-
:
|
7
|
-
:
|
8
|
-
:
|
9
|
-
:
|
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
|
-
</
|
13
|
+
</LabelSlotWrapper>
|
14
14
|
|
15
|
-
<
|
16
|
-
<
|
15
|
+
<LabelWrapper v-if="labelText">
|
16
|
+
<LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
|
17
17
|
{{ labelText }}
|
18
|
-
</
|
18
|
+
</LabelText>
|
19
19
|
|
20
|
-
<
|
20
|
+
<InfoText
|
21
21
|
v-if="labelInfoText"
|
22
|
+
:align-arrow="labelInfoAlign"
|
22
23
|
:text="labelInfoText"
|
23
|
-
:alignArrow="labelInfoAlign"
|
24
24
|
/>
|
25
|
-
</
|
26
|
-
<
|
27
|
-
<
|
25
|
+
</LabelWrapper>
|
26
|
+
<InputWrapper>
|
27
|
+
<InputContainer
|
28
28
|
v-bind="$attrs"
|
29
29
|
ref="inputField1"
|
30
|
-
:
|
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
|
-
:
|
33
|
-
:
|
34
|
-
:
|
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
|
-
|
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
|
-
<
|
56
|
+
<SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
|
57
57
|
<slot></slot>
|
58
|
-
</
|
58
|
+
</SlotContainer>
|
59
59
|
|
60
|
-
<
|
60
|
+
<UnitContainer
|
61
61
|
v-if="unitName && showLinearUnitName && !hasSlot"
|
62
|
-
:
|
63
|
-
:
|
64
|
-
>{{ unitName }}</
|
62
|
+
:has-length="!!textInput.length"
|
63
|
+
:is-error="isError"
|
64
|
+
>{{ unitName }}</UnitContainer
|
65
65
|
>
|
66
|
-
<
|
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
|
-
<
|
72
|
-
</
|
73
|
-
<
|
74
|
-
<
|
71
|
+
<Icon cursor="default" name="warning" size="16px" />
|
72
|
+
</IconWrapper>
|
73
|
+
<SelectWrapper v-if="showSelect">
|
74
|
+
<Divider />
|
75
75
|
<Select
|
76
|
-
:
|
77
|
-
:
|
76
|
+
:select-width="`${selectWidth}px`"
|
77
|
+
:show-border="false"
|
78
78
|
@input-change="$emit('select-change', $event)"
|
79
79
|
>
|
80
80
|
<template #selector>
|
81
|
-
<
|
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
|
-
</
|
94
|
-
</
|
95
|
-
<
|
96
|
-
</
|
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
|
-
|
131
|
-
|
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
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
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
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
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
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
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
|
-
|
219
|
-
|
220
|
-
|
218
|
+
&::placeholder {
|
219
|
+
color: ${(props) => props.theme.colors.grey2};
|
220
|
+
}
|
221
221
|
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
`
|
222
|
+
&:focus {
|
223
|
+
outline: none;
|
224
|
+
}
|
225
|
+
`
|
226
226
|
|
227
|
-
const InputWrapper = styled.span`
|
228
|
-
|
229
|
-
`
|
227
|
+
const InputWrapper = styled.span`
|
228
|
+
position: relative;
|
229
|
+
`
|
230
230
|
|
231
|
-
const UnitContainer = styled('span', inputProps)`
|
232
|
-
|
233
|
-
|
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
|
-
|
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
|
-
|
254
|
-
|
255
|
-
|
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
|
-
|
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
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
`
|
282
|
-
const LabelSlotWrapper = styled('div', inputProps)`
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
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
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
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
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
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
|
-
|
324
|
-
`
|
322
|
+
const SelectText = styled.div`
|
323
|
+
font-size: 13px;
|
324
|
+
`
|
325
325
|
|
326
|
-
const SelectWrapper = styled.div`
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
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
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
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
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
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
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
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
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
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
|
-
|
614
|
-
|
615
|
-
|
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
|
-
|
641
|
-
this.
|
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
|
-
|
668
|
-
if (this.
|
669
|
-
|
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
|
-
|
678
|
-
|
679
|
-
|
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
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
702
|
-
|
703
|
-
|
704
|
-
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
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
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
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>
|