@eturnity/eturnity_reusable_components 1.2.2-EPDM-5243.3 → 1.2.2-QA03-19-9-2022.1

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 (158) hide show
  1. package/package.json +2 -3
  2. package/src/App.vue +11 -86
  3. package/src/assets/icons/error_icon copy.png +0 -0
  4. package/src/components/errorMessage/index.vue +62 -0
  5. package/src/components/inputs/inputNumber/index.vue +118 -75
  6. package/src/assets/icons/warning_icon.svg +0 -3
  7. package/src/assets/svgIcons/2d_active.svg +0 -7
  8. package/src/assets/svgIcons/2d_inactive.svg +0 -8
  9. package/src/assets/svgIcons/3d_active.svg +0 -7
  10. package/src/assets/svgIcons/3d_inactive.svg +0 -8
  11. package/src/assets/svgIcons/accept.svg +0 -5
  12. package/src/assets/svgIcons/activate_panels_active.svg +0 -22
  13. package/src/assets/svgIcons/activate_panels_inactive.svg +0 -20
  14. package/src/assets/svgIcons/add_icon-1.svg +0 -3
  15. package/src/assets/svgIcons/add_icon.svg +0 -4
  16. package/src/assets/svgIcons/address_book.svg +0 -3
  17. package/src/assets/svgIcons/after_sale_as_a_service.svg +0 -6
  18. package/src/assets/svgIcons/all_good.svg +0 -3
  19. package/src/assets/svgIcons/angle_active.svg +0 -5
  20. package/src/assets/svgIcons/angle_inactive.svg +0 -4
  21. package/src/assets/svgIcons/area_active.svg +0 -11
  22. package/src/assets/svgIcons/area_inactive.svg +0 -26
  23. package/src/assets/svgIcons/arrow_down.svg +0 -3
  24. package/src/assets/svgIcons/arrow_left.svg +0 -4
  25. package/src/assets/svgIcons/arrow_right.svg +0 -4
  26. package/src/assets/svgIcons/arrow_up.svg +0 -3
  27. package/src/assets/svgIcons/attachment.svg +0 -3
  28. package/src/assets/svgIcons/battery.svg +0 -3
  29. package/src/assets/svgIcons/bell.svg +0 -3
  30. package/src/assets/svgIcons/bold.svg +0 -3
  31. package/src/assets/svgIcons/bom.svg +0 -3
  32. package/src/assets/svgIcons/bom_generation.svg +0 -10
  33. package/src/assets/svgIcons/bubble.svg +0 -3
  34. package/src/assets/svgIcons/bullet_list.svg +0 -8
  35. package/src/assets/svgIcons/calendar.svg +0 -7
  36. package/src/assets/svgIcons/calendar_icon.svg +0 -7
  37. package/src/assets/svgIcons/call.svg +0 -3
  38. package/src/assets/svgIcons/camera.svg +0 -3
  39. package/src/assets/svgIcons/car.svg +0 -3
  40. package/src/assets/svgIcons/cart.svg +0 -3
  41. package/src/assets/svgIcons/checkbox.svg +0 -3
  42. package/src/assets/svgIcons/clear_formatting.svg +0 -7
  43. package/src/assets/svgIcons/clickable_info.svg +0 -4
  44. package/src/assets/svgIcons/clip.svg +0 -3
  45. package/src/assets/svgIcons/clock.svg +0 -4
  46. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +0 -4
  47. package/src/assets/svgIcons/collapse.svg +0 -4
  48. package/src/assets/svgIcons/component_library.svg +0 -7
  49. package/src/assets/svgIcons/context_menu-1.svg +0 -6
  50. package/src/assets/svgIcons/context_menu-2.svg +0 -5
  51. package/src/assets/svgIcons/context_menu.svg +0 -5
  52. package/src/assets/svgIcons/context_menu_tabs.svg +0 -5
  53. package/src/assets/svgIcons/current_variant.svg +0 -4
  54. package/src/assets/svgIcons/deadline.svg +0 -4
  55. package/src/assets/svgIcons/delete.svg +0 -4
  56. package/src/assets/svgIcons/delete_area_active.svg +0 -16
  57. package/src/assets/svgIcons/delete_area_inactive.svg +0 -15
  58. package/src/assets/svgIcons/direction_active-1.svg +0 -12
  59. package/src/assets/svgIcons/direction_active.svg +0 -5
  60. package/src/assets/svgIcons/direction_inactive.svg +0 -4
  61. package/src/assets/svgIcons/distances_active.svg +0 -9
  62. package/src/assets/svgIcons/distances_inactive.svg +0 -8
  63. package/src/assets/svgIcons/document.svg +0 -3
  64. package/src/assets/svgIcons/downarrow.svg +0 -3
  65. package/src/assets/svgIcons/download.svg +0 -4
  66. package/src/assets/svgIcons/duplicate-1.svg +0 -8
  67. package/src/assets/svgIcons/duplicate-2.svg +0 -5
  68. package/src/assets/svgIcons/duplicate-3.svg +0 -3
  69. package/src/assets/svgIcons/duplicate.svg +0 -4
  70. package/src/assets/svgIcons/e-mobility_configurator.svg +0 -6
  71. package/src/assets/svgIcons/edit_button.svg +0 -3
  72. package/src/assets/svgIcons/email.svg +0 -3
  73. package/src/assets/svgIcons/ems-1.svg +0 -3
  74. package/src/assets/svgIcons/ems.svg +0 -3
  75. package/src/assets/svgIcons/end_of_the_list.svg +0 -5
  76. package/src/assets/svgIcons/erase.svg +0 -4
  77. package/src/assets/svgIcons/fav_icon.svg +0 -4
  78. package/src/assets/svgIcons/financing_for_pv-1.svg +0 -5
  79. package/src/assets/svgIcons/financing_for_pv-2.svg +0 -3
  80. package/src/assets/svgIcons/financing_for_pv.svg +0 -6
  81. package/src/assets/svgIcons/finish-1.svg +0 -4
  82. package/src/assets/svgIcons/finish.svg +0 -3
  83. package/src/assets/svgIcons/folder.svg +0 -3
  84. package/src/assets/svgIcons/heat_calc.svg +0 -7
  85. package/src/assets/svgIcons/house.svg +0 -3
  86. package/src/assets/svgIcons/initial_situation.svg +0 -3
  87. package/src/assets/svgIcons/intro-tour-1.svg +0 -3
  88. package/src/assets/svgIcons/intro-tour.svg +0 -3
  89. package/src/assets/svgIcons/inverter-1.svg +0 -5
  90. package/src/assets/svgIcons/inverter.svg +0 -3
  91. package/src/assets/svgIcons/italic.svg +0 -3
  92. package/src/assets/svgIcons/key.svg +0 -3
  93. package/src/assets/svgIcons/lead_marketplace.svg +0 -6
  94. package/src/assets/svgIcons/lead_provider.svg +0 -4
  95. package/src/assets/svgIcons/length_in_2d_active.svg +0 -12
  96. package/src/assets/svgIcons/length_in_2d_inctive.svg +0 -13
  97. package/src/assets/svgIcons/light_bulb.svg +0 -3
  98. package/src/assets/svgIcons/line_graph.svg +0 -3
  99. package/src/assets/svgIcons/local_subsidies.svg +0 -18
  100. package/src/assets/svgIcons/location.svg +0 -3
  101. package/src/assets/svgIcons/lock.svg +0 -3
  102. package/src/assets/svgIcons/loop.svg +0 -3
  103. package/src/assets/svgIcons/lunch.svg +0 -4
  104. package/src/assets/svgIcons/map_icon.svg +0 -3
  105. package/src/assets/svgIcons/meeting.svg +0 -6
  106. package/src/assets/svgIcons/move_copy.svg +0 -4
  107. package/src/assets/svgIcons/new_area_inactive.svg +0 -11
  108. package/src/assets/svgIcons/next.svg +0 -4
  109. package/src/assets/svgIcons/not_equal_to.svg +0 -3
  110. package/src/assets/svgIcons/numbered_list.svg +0 -6
  111. package/src/assets/svgIcons/obstacle_tool.svg +0 -13
  112. package/src/assets/svgIcons/pan_tool.svg +0 -12
  113. package/src/assets/svgIcons/panels_tool.svg +0 -8
  114. package/src/assets/svgIcons/pen_tool.svg +0 -4
  115. package/src/assets/svgIcons/picker_tool.svg +0 -4
  116. package/src/assets/svgIcons/picture.svg +0 -3
  117. package/src/assets/svgIcons/pin.svg +0 -5
  118. package/src/assets/svgIcons/presentation.svg +0 -3
  119. package/src/assets/svgIcons/previous.svg +0 -4
  120. package/src/assets/svgIcons/profile-1.svg +0 -4
  121. package/src/assets/svgIcons/profile.svg +0 -4
  122. package/src/assets/svgIcons/profitability.svg +0 -3
  123. package/src/assets/svgIcons/project_analysis.svg +0 -4
  124. package/src/assets/svgIcons/project_settings.svg +0 -4
  125. package/src/assets/svgIcons/pv.svg +0 -3
  126. package/src/assets/svgIcons/quotations.svg +0 -6
  127. package/src/assets/svgIcons/rotate_view.svg +0 -5
  128. package/src/assets/svgIcons/run_simulation.svg +0 -3
  129. package/src/assets/svgIcons/scaling_tool.svg +0 -8
  130. package/src/assets/svgIcons/search.svg +0 -3
  131. package/src/assets/svgIcons/security.svg +0 -3
  132. package/src/assets/svgIcons/settings.svg +0 -3
  133. package/src/assets/svgIcons/show_in_a_new_tab.svg +0 -12
  134. package/src/assets/svgIcons/smartphone.svg +0 -4
  135. package/src/assets/svgIcons/solar_calc.svg +0 -13
  136. package/src/assets/svgIcons/sorting.svg +0 -4
  137. package/src/assets/svgIcons/start_of_the_list.svg +0 -5
  138. package/src/assets/svgIcons/strikethrough.svg +0 -4
  139. package/src/assets/svgIcons/subsidies-1.svg +0 -5
  140. package/src/assets/svgIcons/subsidies-2.svg +0 -3
  141. package/src/assets/svgIcons/subsidies.svg +0 -3
  142. package/src/assets/svgIcons/subtract_icon.svg +0 -3
  143. package/src/assets/svgIcons/suitcase.svg +0 -3
  144. package/src/assets/svgIcons/template_icon_not_clickable.svg +0 -6
  145. package/src/assets/svgIcons/truck.svg +0 -3
  146. package/src/assets/svgIcons/underlined.svg +0 -3
  147. package/src/assets/svgIcons/uparrow.svg +0 -3
  148. package/src/assets/svgIcons/upload_avatar-1.svg +0 -12
  149. package/src/assets/svgIcons/upload_avatar.svg +0 -5
  150. package/src/assets/svgIcons/upload_image.svg +0 -8
  151. package/src/assets/svgIcons/virtual_storage.svg +0 -4
  152. package/src/assets/svgIcons/warning.svg +0 -4
  153. package/src/assets/svgIcons/way.svg +0 -5
  154. package/src/assets/svgIcons/wifi.svg +0 -3
  155. package/src/assets/svgIcons/winter.svg +0 -3
  156. package/src/components/icon/Icons.stories.js +0 -41
  157. package/src/components/icon/iconCollection.vue +0 -68
  158. package/src/components/icon/index.vue +0 -74
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.2.2-EPDM-5243.3",
3
+ "version": "1.2.2-QA03-19-9-2022.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -28,8 +28,7 @@
28
28
  "babel-eslint": "^10.1.0",
29
29
  "eslint": "^6.7.2",
30
30
  "eslint-plugin-vue": "^6.2.2",
31
- "vue-template-compiler": "^2.6.11",
32
- "html-loader": "^0.5.5"
31
+ "vue-template-compiler": "^2.6.11"
33
32
  },
34
33
  "eslintConfig": {
35
34
  "root": true,
package/src/App.vue CHANGED
@@ -1,74 +1,14 @@
1
1
  <template>
2
2
  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
3
  <page-container>
4
- <main-table titleText="My Table">
5
- <thead>
6
- <tr>
7
- <th>Column 1</th>
8
- <th>Column 2</th>
9
- <th>Column 3</th>
10
- <div />
11
- </tr>
12
- </thead>
13
- <tbody>
14
- <tr>
15
- <!-- <table-dropdown
16
- :colSpan="3"
17
- :tableItems="getDropdownValues()"
18
- @toggle-dropdown-open="toggleDropdownOpen()"
19
- @item-selected="onItemSelected({ item: $event, index })"
20
- :isOpen="isDropdownOpen()"
21
- :optionItems="itemOptions"
22
- :optionsDisplay="['display_name', 'company_item_number', 'model']"
23
- /> -->
24
- <td>Test</td>
25
- <div class="icons-container">
26
- <three-dots :options="listOptions" :isLoading="false" />
27
- </div>
28
- </tr>
29
- </tbody>
30
- </main-table>
31
- <br />
32
- <br />
33
- <toggle
34
- @on-toggle-change="onInputChange($event)"
35
- :isChecked="inputValue"
36
- label="My Label Text"
37
- infoTextMessage="This is my test message"
38
- infoTextAlign="right"
39
- labelAlign="right"
40
- :disabled="false"
41
- />
42
- <br />
43
4
  <input-number
44
- placeholder="Enter distance"
45
- :numberPrecision="2"
46
- :value="inputValue"
47
- @input-change="onInputChange($event)"
48
- />
49
- <br />
50
- <page-subtitle text="My Subtitle" infoText="My info Text" />
51
- <spinner size="30px" />
52
- <checkbox
53
- label="Do you accept the Terms?"
54
- :isChecked="true"
55
- size="small"
56
- :isDisabled="false"
5
+ :value="num"
6
+ @input-change="num = $event"
7
+ unitName="t"
8
+ id="biebie"
9
+ test="koko"
10
+ @keydown="keydownHandler"
57
11
  />
58
- <external-button text="Click me!" minWidth="500px" />
59
- <icon name="Battery" />
60
- <icon name="Bubble" color="red" hoveredColor="blue" size="60px" />
61
- <icon name="Call" color="red" hoveredColor="blue" size="60px" />
62
- <icon name="Camera" color="yellow" hoveredColor="green" size="60px" />
63
- <icon name="House" color="red" hoveredColor="blue" size="20px" />
64
- <icon name="House" color="red" hoveredColor="blue" size="40px" />
65
- <icon name="House" color="red" hoveredColor="blue" size="80px" />
66
- <icon name="House" color="red" hoveredColor="blue" size="120px" />
67
- <icon name="Area_Active" color="red" hoveredColor="blue" size="150px" />
68
- <icon name="Area_Active" color="red" hoveredColor="blue" size="120px" />
69
- <icon name="Area_Active" color="red" hoveredColor="blue" size="80px" />
70
- <icon name="Area_Active" color="red" hoveredColor="blue" size="40px" />
71
- <collection />
72
12
  </page-container>
73
13
  </ThemeProvider>
74
14
  </template>
@@ -77,17 +17,7 @@
77
17
  import { ThemeProvider } from 'vue-styled-components'
78
18
  import theme from './assets/theme'
79
19
  import styled from 'vue-styled-components'
80
- import MainTable from '@/components/tables/mainTable'
81
- import ThreeDots from '@/components/threeDots'
82
- import Toggle from '@/components/inputs/toggle'
83
20
  import InputNumber from '@/components/inputs/inputNumber'
84
- import Checkbox from '@/components/inputs/checkbox'
85
- import PageSubtitle from '@/components/pageSubtitle'
86
- import Spinner from '@/components/spinner'
87
- import ExternalButton from '@/components/buttons/externalButton'
88
- import icon from '@/components/icon'
89
- import collection from '@/components/icons/iconCollection'
90
- // import TableDropdown from "@/components/tableDropdown"
91
21
 
92
22
  const PageContainer = styled.div`
93
23
  padding: 40px;
@@ -98,20 +28,12 @@ export default {
98
28
  components: {
99
29
  ThemeProvider,
100
30
  PageContainer,
101
- MainTable,
102
- ThreeDots,
103
- Toggle,
104
- InputNumber,
105
- PageSubtitle,
106
- Spinner,
107
- Checkbox,
108
- ExternalButton,
109
- collection,
110
- icon
31
+ InputNumber
111
32
  // TableDropdown,
112
33
  },
113
34
  data() {
114
35
  return {
36
+ num: 42,
115
37
  inputValue: null,
116
38
  checkedOption: 'button_1',
117
39
  question: {
@@ -170,6 +92,9 @@ export default {
170
92
  }
171
93
  },
172
94
  methods: {
95
+ keydownHandler(e) {
96
+ console.log('test', e)
97
+ },
173
98
  getTheme() {
174
99
  return theme
175
100
  },
@@ -0,0 +1,62 @@
1
+ <template>
2
+ <component-wrapper>
3
+ <text-overlay>
4
+ <slot></slot>
5
+ </text-overlay>
6
+ </component-wrapper>
7
+ </template>
8
+
9
+ <script>
10
+ // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
11
+ //To use:
12
+ // <error-message
13
+ // alignText="right" // default is left
14
+ // />
15
+
16
+ import styled from 'vue-styled-components'
17
+
18
+ const TextOverlay = styled.div`
19
+ position: absolute;
20
+ top: calc(100% + 13px);
21
+ background: ${(props) => props.theme.colors.red};
22
+ padding: 10px;
23
+ width: max-content;
24
+ max-width: 100%;
25
+ min-width: 200px;
26
+ font-size: 11px;
27
+ font-weight: 400;
28
+ border-radius: 4px;
29
+ font-family: 'Lato-Bold', Arial;
30
+ z-index: 99;
31
+ color: ${(props) => props.theme.colors.white};
32
+
33
+ :before {
34
+ content: '';
35
+ background-color: ${(props) => props.theme.colors.red};
36
+ position: absolute;
37
+ top: 2px;
38
+ left: 40px;
39
+ height: 11px;
40
+ width: 11px;
41
+ transform-origin: center center;
42
+ transform: translate(-2em, -0.5em) rotate(45deg);
43
+ }
44
+ `
45
+
46
+ const ComponentWrapper = styled.div`
47
+ display: block;
48
+ `
49
+
50
+ export default {
51
+ name: 'info-text',
52
+ components: {
53
+ TextOverlay,
54
+ ComponentWrapper
55
+ },
56
+ props: {},
57
+ methods: {},
58
+ data() {
59
+ return {}
60
+ }
61
+ }
62
+ </script>
@@ -14,9 +14,10 @@
14
14
  </label-wrapper>
15
15
  <input-wrapper>
16
16
  <input-container
17
+ v-bind="$attrs"
17
18
  ref="inputField1"
18
19
  :hasUnit="unitName && !!unitName.length"
19
- :placeholder="placeholder"
20
+ :placeholder="displayedPlaceholder"
20
21
  :isError="isError"
21
22
  :inputWidth="inputWidth"
22
23
  :minWidth="minWidth"
@@ -30,6 +31,7 @@
30
31
  :textAlign="textAlign"
31
32
  :fontSize="fontSize"
32
33
  :fontColor="fontColor"
34
+ v-on="$listeners"
33
35
  />
34
36
  <unit-container
35
37
  v-if="unitName && showLinearUnitName"
@@ -37,6 +39,11 @@
37
39
  :isError="isError"
38
40
  >{{ unitName }}</unit-container
39
41
  >
42
+ <icon
43
+ v-if="(isError || inputIcon) && !showLinearUnitName"
44
+ :class="inputIconImageClass"
45
+ :src="isError ? warningIcon : inputIconImage"
46
+ />
40
47
  </input-wrapper>
41
48
  <error-message v-if="isError">{{ errorMessage }}</error-message>
42
49
  </container>
@@ -68,13 +75,14 @@
68
75
  // :minNumber="0"
69
76
  // fontColor="blue"
70
77
  // />
71
- import styled from "vue-styled-components"
78
+ import styled from 'vue-styled-components'
72
79
  import {
73
80
  stringToNumber,
74
- numberToString,
75
- } from "../../../helpers/numberConverter"
76
- import InfoText from "../../infoText"
77
-
81
+ numberToString
82
+ } from '../../../helpers/numberConverter'
83
+ import InfoText from '../../infoText'
84
+ import ErrorMessage from '../../errorMessage'
85
+ import warningIcon from '../../../assets/icons/error_icon.png'
78
86
  const Container = styled.div`
79
87
  width: 100%;
80
88
  position: relative;
@@ -89,31 +97,31 @@ const inputProps = {
89
97
  noBorder: Boolean,
90
98
  textAlign: String,
91
99
  fontSize: String,
92
- fontColor: String,
100
+ fontColor: String
93
101
  }
94
- const InputContainer = styled("input", inputProps)`
102
+ const InputContainer = styled('input', inputProps)`
95
103
  border: ${(props) =>
96
104
  props.isError
97
- ? "1px solid " + props.theme.colors.red
105
+ ? '1px solid ' + props.theme.colors.red
98
106
  : props.noBorder
99
- ? "none"
100
- : "1px solid " + props.theme.colors.mediumGray};
107
+ ? 'none'
108
+ : '1px solid ' + props.theme.colors.mediumGray};
101
109
  padding: ${(props) =>
102
- props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
110
+ props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
103
111
  border-radius: 4px;
104
112
  text-align: ${(props) => props.textAlign};
105
- cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
106
- font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
113
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
114
+ font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
107
115
  color: ${(props) =>
108
116
  props.isError
109
117
  ? props.theme.colors.red
110
118
  : props.fontColor
111
- ? props.fontColor + " !important"
119
+ ? props.fontColor + ' !important'
112
120
  : props.theme.colors.black};
113
- width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
114
- min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
121
+ width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
122
+ min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
115
123
  background-color: ${(props) =>
116
- props.isDisabled ? props.theme.colors.grey5 : "#fff"};
124
+ props.isDisabled ? props.theme.colors.grey5 : '#fff'};
117
125
  box-sizing: border-box;
118
126
 
119
127
  &::placeholder {
@@ -125,12 +133,21 @@ const InputContainer = styled("input", inputProps)`
125
133
  outline: none;
126
134
  }
127
135
  `
136
+ const IconProps = {
137
+ inputIconHeight: String
138
+ }
139
+
140
+ const Icon = styled('img', IconProps)`
141
+ position: absolute;
142
+ right: 10px;
143
+ top: 2px;
144
+ `
128
145
 
129
146
  const InputWrapper = styled.span`
130
147
  position: relative;
131
148
  `
132
149
 
133
- const UnitContainer = styled("span", inputProps)`
150
+ const UnitContainer = styled('span', inputProps)`
134
151
  border-left: 1px solid
135
152
  ${(props) =>
136
153
  props.isError
@@ -150,12 +167,14 @@ const UnitContainer = styled("span", inputProps)`
150
167
  : props.theme.colors.mediumGray};
151
168
  `
152
169
 
153
- const ErrorMessage = styled.div`
154
- font-size: 14px;
155
- color: ${(props) => props.theme.colors.red};
156
- position: absolute;
157
- top: calc(100% + 1px);
158
- `
170
+ // const ErrorMessage = styled.div`
171
+ // margin-top: 5px;
172
+ // line-height: 1;
173
+ // text-transform: none;
174
+ // font-size: 10px;
175
+ // color: ${(props) => props.theme.colors.red};
176
+ // position: absolute;
177
+ // `
159
178
 
160
179
  const LabelWrapper = styled.div`
161
180
  display: flex;
@@ -169,7 +188,7 @@ const LabelText = styled.div`
169
188
  `
170
189
 
171
190
  export default {
172
- name: "input-number",
191
+ name: 'input-number',
173
192
  components: {
174
193
  Container,
175
194
  InputContainer,
@@ -179,130 +198,154 @@ export default {
179
198
  LabelWrapper,
180
199
  LabelText,
181
200
  InfoText,
201
+ Icon
182
202
  },
203
+ inheritAttrs: false,
183
204
  data() {
184
205
  return {
185
- textInput: "",
206
+ textInput: '',
186
207
  isFocused: false,
208
+ warningIcon: warningIcon
209
+ }
210
+ },
211
+ computed: {
212
+ displayedPlaceholder() {
213
+ if (this.placeholder) return this.placeholder
214
+ return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
187
215
  }
188
216
  },
189
217
  props: {
190
218
  placeholder: {
191
219
  required: false,
192
- default: "",
220
+ default: ''
193
221
  },
194
222
  isError: {
195
223
  required: false,
196
- default: false,
224
+ default: false
197
225
  },
198
226
  inputWidth: {
199
227
  required: false,
200
- default: null,
228
+ default: null
201
229
  },
202
230
  minWidth: {
203
231
  required: false,
204
- default: null,
232
+ default: null
205
233
  },
206
234
  value: {
207
235
  required: true,
208
- default: null,
236
+ default: null
209
237
  },
210
238
  clearInput: {
211
239
  required: false,
212
- default: false,
240
+ default: false
213
241
  },
214
242
  errorMessage: {
215
243
  required: false,
216
- default: "Please insert a correct number",
244
+ default: 'Please insert a correct number'
217
245
  },
218
246
  numberPrecision: {
219
247
  required: false,
220
- default: 0,
248
+ default: 0
221
249
  },
222
250
  unitName: {
223
251
  required: false,
224
- default: "",
252
+ default: ''
225
253
  },
226
254
  showLinearUnitName: {
227
255
  required: false,
228
- default: false,
256
+ default: false
229
257
  },
230
258
  disabled: {
231
259
  required: false,
232
- default: false,
260
+ default: false
233
261
  },
234
262
  noBorder: {
235
263
  required: false,
236
- default: false,
264
+ default: false
237
265
  },
238
266
  textAlign: {
239
267
  required: false,
240
- default: "left",
268
+ default: 'left'
241
269
  },
242
270
  fontSize: {
243
271
  required: false,
244
- default: "13px",
272
+ default: '13px'
245
273
  },
246
274
  labelText: {
247
275
  required: false,
248
- default: null,
276
+ default: null
249
277
  },
250
278
  labelInfoText: {
251
279
  required: false,
252
- default: null,
280
+ default: null
253
281
  },
254
282
  labelInfoAlign: {
255
283
  required: false,
256
- default: "right",
284
+ default: 'right'
257
285
  },
258
286
  minNumber: {
259
287
  required: false,
260
- default: null,
288
+ default: null
261
289
  },
262
290
  fontColor: {
263
291
  required: false,
264
- default: null,
292
+ default: null
265
293
  },
266
294
  numberToStringEnabled: {
267
295
  required: false,
268
- default: true,
296
+ default: true
297
+ },
298
+ inputIcon: {
299
+ require: false,
300
+ type: Boolean,
301
+ default: false
302
+ },
303
+ inputIconImage: {
304
+ require: false,
305
+ type: String,
306
+ default: ''
269
307
  },
308
+ inputIconImageClass: {
309
+ require: false,
310
+ type: Array,
311
+ default: () => []
312
+ }
270
313
  },
271
314
  methods: {
272
315
  onChangeHandler(event) {
273
316
  if (isNaN(event)) {
274
317
  event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
275
318
  }
276
- this.$emit("input-change", event)
319
+ this.$emit('input-change', event)
277
320
  },
278
321
  onEvaluateCode(val) {
279
322
  // function to perform math on the code
280
323
  // filter the string in case of any malicious content
281
- let filtered = val.replace(/[^-()\d/*+.,]/g, "")
324
+ let filtered = val.replace(/[^-()\d/*+.,]/g, '')
282
325
  filtered = filtered.split(/([-+*/()])/)
283
326
  let formatted = filtered.map((item) => {
284
327
  if (
285
- item === "+" ||
286
- item === "-" ||
287
- item === "*" ||
288
- item === "/" ||
289
- item === "(" ||
290
- item === ")" ||
291
- item === ""
328
+ item === '+' ||
329
+ item === '-' ||
330
+ item === '*' ||
331
+ item === '/' ||
332
+ item === '(' ||
333
+ item === ')' ||
334
+ item === ''
292
335
  ) {
293
336
  return item
294
337
  } else {
295
338
  let num = stringToNumber({
296
339
  value: item,
297
- numberPrecision: false,
340
+ numberPrecision: false
298
341
  })
299
342
  return num
300
343
  }
301
344
  })
302
- let evaluated = eval(formatted.join(""))
345
+ let evaluated = eval(formatted.join(''))
303
346
  evaluated = stringToNumber({
304
347
  value: evaluated,
305
- numberPrecision: this.numberPrecision,
348
+ numberPrecision: this.numberPrecision
306
349
  })
307
350
  return evaluated
308
351
  },
@@ -315,7 +358,7 @@ export default {
315
358
  this.textInput = numberToString({
316
359
  value:
317
360
  evaluatedInput && value.length ? evaluatedInput : this.minNumber,
318
- numberPrecision: this.numberPrecision,
361
+ numberPrecision: this.numberPrecision
319
362
  })
320
363
  }
321
364
  let adjustedMinValue =
@@ -323,8 +366,8 @@ export default {
323
366
  ? value
324
367
  : this.minNumber || this.minNumber === 0
325
368
  ? this.minNumber
326
- : ""
327
- this.$emit("input-blur", adjustedMinValue)
369
+ : ''
370
+ this.$emit('input-blur', adjustedMinValue)
328
371
  },
329
372
  focusInput() {
330
373
  if (this.disabled) {
@@ -341,38 +384,38 @@ export default {
341
384
  ? value
342
385
  : this.minNumber || this.minNumber === 0
343
386
  ? this.minNumber
344
- : ""
387
+ : ''
345
388
  if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
346
389
  let input = this.numberToStringEnabled
347
390
  ? numberToString({
348
391
  value: adjustedMinValue,
349
- numberPrecision: this.numberPrecision,
392
+ numberPrecision: this.numberPrecision
350
393
  })
351
394
  : adjustedMinValue
352
- let unit = this.showLinearUnitName ? "" : this.unitName
353
- return input + " " + unit
395
+ let unit = this.showLinearUnitName ? '' : this.unitName
396
+ return input + ' ' + unit
354
397
  } else if (!adjustedMinValue && adjustedMinValue !== 0) {
355
- return ""
398
+ return ''
356
399
  } else {
357
400
  return this.numberToStringEnabled
358
401
  ? numberToString({
359
402
  value: adjustedMinValue,
360
- numberPrecision: this.numberPrecision,
403
+ numberPrecision: this.numberPrecision
361
404
  })
362
405
  : adjustedMinValue
363
406
  }
364
- },
407
+ }
365
408
  },
366
409
  created() {
367
410
  if (this.value) {
368
411
  this.textInput = numberToString({
369
412
  value: this.value,
370
- numberPrecision: this.numberPrecision,
413
+ numberPrecision: this.numberPrecision
371
414
  })
372
415
  } else if (this.minNumber !== null) {
373
416
  this.textInput = numberToString({
374
417
  value: this.minNumber,
375
- numberPrecision: this.numberPrecision,
418
+ numberPrecision: this.numberPrecision
376
419
  })
377
420
  }
378
421
  },
@@ -380,9 +423,9 @@ export default {
380
423
  clearInput: function (value) {
381
424
  if (value) {
382
425
  // If the value is typed, then we should clear the textInput on Continue
383
- this.textInput = ""
426
+ this.textInput = ''
384
427
  }
385
- },
386
- },
428
+ }
429
+ }
387
430
  }
388
- </script>
431
+ </script>
@@ -1,3 +0,0 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M12 -1.04907e-06C14.3734 -8.41587e-07 16.6934 0.703787 18.6668 2.02236C20.6402 3.34094 22.1783 5.21509 23.0865 7.4078C23.9948 9.60051 24.2324 12.0133 23.7694 14.3411C23.3064 16.6689 22.1635 18.8071 20.4853 20.4853C18.807 22.1635 16.6688 23.3064 14.3411 23.7694C12.0133 24.2324 9.6005 23.9948 7.40779 23.0866C5.21508 22.1783 3.34093 20.6402 2.02236 18.6668C0.703782 16.6935 -6.97861e-06 14.3734 -6.77112e-06 12C-6.49289e-06 8.8174 1.26428 5.76515 3.51471 3.51472C5.76515 1.26428 8.8174 -1.32731e-06 12 -1.04907e-06ZM9.74999 19.81L14.25 19.81L14.25 10.81L9.74999 10.81L9.74999 19.81ZM12 8.69C12.445 8.69 12.88 8.55804 13.25 8.31081C13.62 8.06357 13.9084 7.71217 14.0787 7.30104C14.249 6.8899 14.2936 6.4375 14.2068 6.00105C14.1199 5.56459 13.9057 5.16368 13.591 4.84901C13.2763 4.53434 12.8754 4.32005 12.4389 4.23323C12.0025 4.14642 11.5501 4.19097 11.139 4.36127C10.7278 4.53157 10.3764 4.81996 10.1292 5.18997C9.88195 5.55998 9.74999 5.99499 9.74999 6.44C9.75079 7.03649 9.98809 7.60833 10.4099 8.03011C10.8317 8.4519 11.4035 8.68921 12 8.69Z" fill="#B2B9C5"/>
3
- </svg>
@@ -1,7 +0,0 @@
1
- <svg fill="none" height="35" viewbox="4 2 32 35" width="32" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M18.5503 29.3C18.5503 30.3 17.7503 31.4 16.7503 32.5L14.6503 34.7H18.9503V36.5H11.7503V35L15.2503 31.3C15.8503 30.7 16.2503 30 16.2503 29.6C16.2503 29 15.7503 28.6 14.9503 28.6C14.1503 28.6 13.1503 29.1 12.3503 29.8L11.5503 28.2C12.7503 27.3 13.9503 26.8 15.3503 26.8C17.1503 26.8 18.5503 27.8 18.5503 29.3Z" fill="#666666"></path>
3
- <path d="M24.4502 26.9001C27.4502 26.9001 29.5502 28.9001 29.5502 31.7001C29.5502 34.5001 27.4502 36.5001 24.4502 36.5001H20.4502V26.9001H24.4502ZM22.5502 34.7001H24.5502C26.1502 34.7001 27.3502 33.5001 27.3502 31.7001C27.3502 29.9001 26.1502 28.7001 24.4502 28.7001H22.5502V34.7001V34.7001Z" fill="#666666"></path>
4
- <path d="M35.0502 13L20.0502 22.5L4.9502 13L20.0502 3.5L35.0502 13Z" stroke="#666666" stroke-miterlimit="10"></path>
5
- <path d="M4.9502 13H20.0502H35.0502" stroke="#666666" stroke-miterlimit="10"></path>
6
- <path d="M20.0503 3.5V22.5" stroke="#666666" stroke-miterlimit="10"></path>
7
- </svg>
@@ -1,8 +0,0 @@
1
- <svg fill="none" height="42" viewbox="-1 -1 42 42" width="42" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#B2B9C5" height="40" width="40"></rect>
3
- <path d="M18.5503 29.3C18.5503 30.3 17.7503 31.4 16.7503 32.5L14.6503 34.7H18.9503V36.5H11.7503V35L15.2503 31.3C15.8503 30.7 16.2503 30 16.2503 29.6C16.2503 29 15.7503 28.6 14.9503 28.6C14.1503 28.6 13.1503 29.1 12.3503 29.8L11.5503 28.2C12.7503 27.3 13.9503 26.8 15.3503 26.8C17.1503 26.8 18.5503 27.8 18.5503 29.3Z" fill="white"></path>
4
- <path d="M24.4502 26.9001C27.4502 26.9001 29.5502 28.9001 29.5502 31.7001C29.5502 34.5001 27.4502 36.5001 24.4502 36.5001H20.4502V26.9001H24.4502ZM22.5502 34.7001H24.5502C26.1502 34.7001 27.3502 33.5001 27.3502 31.7001C27.3502 29.9001 26.1502 28.7001 24.4502 28.7001H22.5502V34.7001V34.7001Z" fill="white"></path>
5
- <path d="M35.0502 13L20.0502 22.5L4.9502 13L20.0502 3.5L35.0502 13Z" stroke="white" stroke-miterlimit="10"></path>
6
- <path d="M4.9502 13H20.0502H35.0502" stroke="white" stroke-miterlimit="10"></path>
7
- <path d="M20.0503 3.5V22.5" stroke="white" stroke-miterlimit="10"></path>
8
- </svg>
@@ -1,7 +0,0 @@
1
- <svg fill="none" height="36" viewbox="5 2 30 36" width="30" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M16.45 31.6001C17.75 31.8001 18.75 32.6001 18.75 34.0001C18.75 35.7001 17.45 36.9001 15.45 36.9001C14.25 36.9001 13.05 36.5001 12.25 35.9001L13.05 34.2001C13.75 34.9001 14.55 35.2001 15.35 35.2001C16.35 35.2001 16.85 34.7001 16.85 34.0001C16.85 33.2001 16.35 32.8001 15.35 32.8001H13.95V31.7001L16.05 29.5001H12.65V27.9001H18.35V29.1001L16.05 31.5001L16.45 31.6001Z" fill="#666666"></path>
3
- <path d="M24.05 27.9001C26.85 27.9001 28.75 29.7001 28.75 32.4001C28.75 35.0001 26.85 36.9001 23.95 36.9001H20.25V28.0001H24.05V27.9001ZM22.25 35.1001H24.05C25.55 35.1001 26.65 34.0001 26.65 32.4001C26.65 30.8001 25.55 29.6001 23.95 29.6001H22.25V35.1001V35.1001Z" fill="#666666"></path>
4
- <path d="M20.1498 4.6001L32.2498 18.7001L19.9498 23.8001L7.7498 18.7001L20.1498 4.6001ZM20.1498 3.1001L6.0498 19.1001L19.9498 24.9001L33.9498 19.1001L20.1498 3.1001Z" fill="#666666"></path>
5
- <path d="M20.1497 4.5L19.9497 24.4" stroke="#666666" stroke-miterlimit="10"></path>
6
- <path d="M7.25 19L19.95 13.3L32.55 18.5" stroke="#666666" stroke-dasharray="3 3" stroke-miterlimit="10"></path>
7
- </svg>
@@ -1,8 +0,0 @@
1
- <svg fill="none" height="42" viewbox="-1 -1 42 42" width="42" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#B2B9C5" height="40" width="40"></rect>
3
- <path d="M16.45 31.6001C17.75 31.8001 18.75 32.6001 18.75 34.0001C18.75 35.7001 17.45 36.9001 15.45 36.9001C14.25 36.9001 13.05 36.5001 12.25 35.9001L13.05 34.2001C13.75 34.9001 14.55 35.2001 15.35 35.2001C16.35 35.2001 16.85 34.7001 16.85 34.0001C16.85 33.2001 16.35 32.8001 15.35 32.8001H13.95V31.7001L16.05 29.5001H12.65V27.9001H18.35V29.1001L16.05 31.5001L16.45 31.6001Z" fill="white"></path>
4
- <path d="M24.05 27.9001C26.85 27.9001 28.75 29.7001 28.75 32.4001C28.75 35.0001 26.85 36.9001 23.95 36.9001H20.25V28.0001H24.05V27.9001ZM22.25 35.1001H24.05C25.55 35.1001 26.65 34.0001 26.65 32.4001C26.65 30.8001 25.55 29.6001 23.95 29.6001H22.25V35.1001V35.1001Z" fill="white"></path>
5
- <path d="M20.1498 4.6001L32.2498 18.7001L19.9498 23.8001L7.7498 18.7001L20.1498 4.6001ZM20.1498 3.1001L6.0498 19.1001L19.9498 24.9001L33.9498 19.1001L20.1498 3.1001Z" fill="white"></path>
6
- <path d="M20.1497 4.5L19.9497 24.4" stroke="white" stroke-miterlimit="10"></path>
7
- <path d="M7.25 19L19.95 13.3L32.55 18.5" stroke="white" stroke-dasharray="3 3" stroke-miterlimit="10"></path>
8
- </svg>