@eturnity/eturnity_reusable_components 7.30.3-EPDM-8441.0 → 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 (323) hide show
  1. package/.eslintrc.js +184 -0
  2. package/.prettierrc +9 -7
  3. package/.storybook/main.js +8 -8
  4. package/.storybook/preview.js +46 -46
  5. package/README.md +29 -29
  6. package/babel.config.js +5 -5
  7. package/package.json +50 -62
  8. package/postcss.config.js +6 -6
  9. package/src/App.vue +110 -109
  10. package/src/assets/icons/arrow_down.svg +3 -3
  11. package/src/assets/icons/arrow_up_red.svg +3 -3
  12. package/src/assets/icons/black_spinner.svg +35 -35
  13. package/src/assets/icons/delete_icon.svg +11 -11
  14. package/src/assets/icons/delete_icon_gray.svg +11 -11
  15. package/src/assets/icons/drag_icon.svg +8 -8
  16. package/src/assets/icons/external_icon.svg +6 -6
  17. package/src/assets/icons/language_icon.svg +6 -6
  18. package/src/assets/icons/pdf_icon.svg +6 -6
  19. package/src/assets/icons/plus_button.svg +4 -4
  20. package/src/assets/icons/search_icon_black.svg +3 -3
  21. package/src/assets/icons/subposition_icon.svg +3 -3
  22. package/src/assets/icons/subposition_marker.svg +3 -3
  23. package/src/assets/icons/warning_icon.svg +3 -3
  24. package/src/assets/svgIcons/2d_active.svg +7 -7
  25. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  26. package/src/assets/svgIcons/3d_active.svg +7 -7
  27. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  28. package/src/assets/svgIcons/_readme.md +7 -7
  29. package/src/assets/svgIcons/accept.svg +5 -5
  30. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  31. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  32. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  33. package/src/assets/svgIcons/add_icon.svg +4 -4
  34. package/src/assets/svgIcons/address_book.svg +3 -3
  35. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  36. package/src/assets/svgIcons/all_good.svg +3 -3
  37. package/src/assets/svgIcons/angle_active.svg +5 -5
  38. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  39. package/src/assets/svgIcons/area_active.svg +11 -11
  40. package/src/assets/svgIcons/area_inactive.svg +26 -26
  41. package/src/assets/svgIcons/areas_tool.svg +14 -14
  42. package/src/assets/svgIcons/arrow_down.svg +3 -3
  43. package/src/assets/svgIcons/arrow_left.svg +4 -4
  44. package/src/assets/svgIcons/arrow_right.svg +4 -4
  45. package/src/assets/svgIcons/arrow_up.svg +3 -3
  46. package/src/assets/svgIcons/attachment.svg +3 -3
  47. package/src/assets/svgIcons/base_layer.svg +3 -3
  48. package/src/assets/svgIcons/battery.svg +3 -3
  49. package/src/assets/svgIcons/bell.svg +3 -3
  50. package/src/assets/svgIcons/bexio.svg +4 -4
  51. package/src/assets/svgIcons/bold.svg +3 -3
  52. package/src/assets/svgIcons/bom.svg +3 -3
  53. package/src/assets/svgIcons/bom_generation.svg +10 -10
  54. package/src/assets/svgIcons/bookmaker.svg +3 -3
  55. package/src/assets/svgIcons/bubble.svg +3 -3
  56. package/src/assets/svgIcons/bug.svg +5 -5
  57. package/src/assets/svgIcons/bullet_list.svg +8 -8
  58. package/src/assets/svgIcons/calendar.svg +7 -7
  59. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  60. package/src/assets/svgIcons/call.svg +3 -3
  61. package/src/assets/svgIcons/camera.svg +3 -3
  62. package/src/assets/svgIcons/car.svg +3 -3
  63. package/src/assets/svgIcons/cart.svg +3 -3
  64. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  65. package/src/assets/svgIcons/checkbox.svg +3 -3
  66. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  67. package/src/assets/svgIcons/clickable_info.svg +4 -4
  68. package/src/assets/svgIcons/clip.svg +3 -3
  69. package/src/assets/svgIcons/clock.svg +17 -17
  70. package/src/assets/svgIcons/clock_full.svg +3 -3
  71. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  72. package/src/assets/svgIcons/co_branding.svg +5 -5
  73. package/src/assets/svgIcons/collapse.svg +4 -4
  74. package/src/assets/svgIcons/collections.svg +3 -3
  75. package/src/assets/svgIcons/component_library.svg +7 -7
  76. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  77. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  78. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  79. package/src/assets/svgIcons/context_menu.svg +5 -5
  80. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  81. package/src/assets/svgIcons/cross.svg +4 -4
  82. package/src/assets/svgIcons/current_variant.svg +4 -4
  83. package/src/assets/svgIcons/dashboard.svg +3 -3
  84. package/src/assets/svgIcons/data_transfer.svg +3 -3
  85. package/src/assets/svgIcons/deadline.svg +4 -4
  86. package/src/assets/svgIcons/deal_flow.svg +5 -5
  87. package/src/assets/svgIcons/delete.svg +4 -4
  88. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  89. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  90. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  91. package/src/assets/svgIcons/direction_active.svg +5 -5
  92. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  93. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  94. package/src/assets/svgIcons/dislike.svg +3 -3
  95. package/src/assets/svgIcons/distance_tool.svg +8 -8
  96. package/src/assets/svgIcons/distances_active.svg +9 -9
  97. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  98. package/src/assets/svgIcons/distort_tool.svg +10 -10
  99. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  100. package/src/assets/svgIcons/document.svg +3 -3
  101. package/src/assets/svgIcons/documents.svg +4 -4
  102. package/src/assets/svgIcons/downarrow.svg +3 -3
  103. package/src/assets/svgIcons/download.svg +4 -4
  104. package/src/assets/svgIcons/drag_icon.svg +8 -8
  105. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  106. package/src/assets/svgIcons/draw_tool.svg +3 -3
  107. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  108. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  109. package/src/assets/svgIcons/duplicate.svg +4 -4
  110. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  111. package/src/assets/svgIcons/e_signature.svg +5 -5
  112. package/src/assets/svgIcons/edit_button.svg +3 -3
  113. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  114. package/src/assets/svgIcons/email.svg +3 -3
  115. package/src/assets/svgIcons/ems-1.svg +3 -3
  116. package/src/assets/svgIcons/ems.svg +3 -3
  117. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  118. package/src/assets/svgIcons/erase.svg +4 -4
  119. package/src/assets/svgIcons/external_icon.svg +5 -5
  120. package/src/assets/svgIcons/fav_icon.svg +4 -4
  121. package/src/assets/svgIcons/finance.svg +3 -3
  122. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  123. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  124. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  125. package/src/assets/svgIcons/finish-1.svg +4 -4
  126. package/src/assets/svgIcons/finish.svg +3 -3
  127. package/src/assets/svgIcons/flatten.svg +11 -11
  128. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  129. package/src/assets/svgIcons/folder.svg +3 -3
  130. package/src/assets/svgIcons/free_technology.svg +5 -5
  131. package/src/assets/svgIcons/handle.svg +5 -5
  132. package/src/assets/svgIcons/heat_calc.svg +7 -7
  133. package/src/assets/svgIcons/height_equalize.svg +3 -3
  134. package/src/assets/svgIcons/height_snap.svg +3 -3
  135. package/src/assets/svgIcons/house.svg +3 -3
  136. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  137. package/src/assets/svgIcons/house_3d.svg +7 -7
  138. package/src/assets/svgIcons/inclination.svg +2 -2
  139. package/src/assets/svgIcons/info.svg +3 -3
  140. package/src/assets/svgIcons/initial_situation.svg +3 -3
  141. package/src/assets/svgIcons/integrations.svg +3 -3
  142. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  143. package/src/assets/svgIcons/intro-tour.svg +3 -3
  144. package/src/assets/svgIcons/inverter-1.svg +5 -5
  145. package/src/assets/svgIcons/inverter.svg +3 -3
  146. package/src/assets/svgIcons/italic.svg +3 -3
  147. package/src/assets/svgIcons/key.svg +3 -3
  148. package/src/assets/svgIcons/layers_close.svg +4 -4
  149. package/src/assets/svgIcons/layers_open.svg +4 -4
  150. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  151. package/src/assets/svgIcons/lead_provider.svg +4 -4
  152. package/src/assets/svgIcons/length_2d.svg +2 -2
  153. package/src/assets/svgIcons/length_3d.svg +4 -4
  154. package/src/assets/svgIcons/length_calculator.svg +2 -2
  155. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  156. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  157. package/src/assets/svgIcons/light_bulb.svg +3 -3
  158. package/src/assets/svgIcons/like.svg +3 -3
  159. package/src/assets/svgIcons/line_graph.svg +3 -3
  160. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  161. package/src/assets/svgIcons/location.svg +3 -3
  162. package/src/assets/svgIcons/lock.svg +3 -3
  163. package/src/assets/svgIcons/logout.svg +3 -3
  164. package/src/assets/svgIcons/loop.svg +3 -3
  165. package/src/assets/svgIcons/lunch.svg +4 -4
  166. package/src/assets/svgIcons/magic_tool.svg +6 -6
  167. package/src/assets/svgIcons/map_icon.svg +5 -5
  168. package/src/assets/svgIcons/map_settings.svg +3 -3
  169. package/src/assets/svgIcons/margin_tool.svg +4 -4
  170. package/src/assets/svgIcons/meeting.svg +6 -6
  171. package/src/assets/svgIcons/move_copy.svg +4 -4
  172. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  173. package/src/assets/svgIcons/next.svg +4 -4
  174. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  175. package/src/assets/svgIcons/numbered_list.svg +6 -6
  176. package/src/assets/svgIcons/obstacle_tool.svg +9 -9
  177. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  178. package/src/assets/svgIcons/offset_tool.svg +8 -8
  179. package/src/assets/svgIcons/outline_tool.svg +11 -11
  180. package/src/assets/svgIcons/pan_tool.svg +12 -12
  181. package/src/assets/svgIcons/panels_tool.svg +8 -8
  182. package/src/assets/svgIcons/pen_tool.svg +4 -4
  183. package/src/assets/svgIcons/picker_tool.svg +4 -4
  184. package/src/assets/svgIcons/picture.svg +3 -3
  185. package/src/assets/svgIcons/pin.svg +5 -5
  186. package/src/assets/svgIcons/presentation.svg +3 -3
  187. package/src/assets/svgIcons/previous.svg +4 -4
  188. package/src/assets/svgIcons/profile-1.svg +4 -4
  189. package/src/assets/svgIcons/profile.svg +4 -4
  190. package/src/assets/svgIcons/profitability.svg +3 -3
  191. package/src/assets/svgIcons/project_analysis.svg +4 -4
  192. package/src/assets/svgIcons/project_settings.svg +4 -4
  193. package/src/assets/svgIcons/pv.svg +3 -3
  194. package/src/assets/svgIcons/quotations.svg +6 -6
  195. package/src/assets/svgIcons/redo.svg +6 -6
  196. package/src/assets/svgIcons/resizer.svg +5 -5
  197. package/src/assets/svgIcons/roof_layer.svg +3 -3
  198. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  199. package/src/assets/svgIcons/rotate_view.svg +5 -5
  200. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  201. package/src/assets/svgIcons/run_simulation.svg +3 -3
  202. package/src/assets/svgIcons/save.svg +3 -3
  203. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  204. package/src/assets/svgIcons/search.svg +3 -3
  205. package/src/assets/svgIcons/security.svg +3 -3
  206. package/src/assets/svgIcons/settings.svg +3 -3
  207. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  208. package/src/assets/svgIcons/smartphone.svg +4 -4
  209. package/src/assets/svgIcons/solar_calc.svg +13 -13
  210. package/src/assets/svgIcons/sorting.svg +4 -4
  211. package/src/assets/svgIcons/split.svg +12 -12
  212. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  213. package/src/assets/svgIcons/strikethrough.svg +4 -4
  214. package/src/assets/svgIcons/subscriptions.svg +3 -3
  215. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  216. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  217. package/src/assets/svgIcons/subsidies.svg +3 -3
  218. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  219. package/src/assets/svgIcons/suitcase.svg +3 -3
  220. package/src/assets/svgIcons/summer.svg +3 -3
  221. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  222. package/src/assets/svgIcons/transfer.svg +4 -4
  223. package/src/assets/svgIcons/trim_tool.svg +4 -4
  224. package/src/assets/svgIcons/truck.svg +3 -3
  225. package/src/assets/svgIcons/underlined.svg +3 -3
  226. package/src/assets/svgIcons/undo.svg +6 -6
  227. package/src/assets/svgIcons/uparrow.svg +3 -3
  228. package/src/assets/svgIcons/update.svg +3 -3
  229. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  230. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  231. package/src/assets/svgIcons/upload_image.svg +8 -8
  232. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  233. package/src/assets/svgIcons/variants.svg +6 -6
  234. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  235. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  236. package/src/assets/svgIcons/warning.svg +4 -4
  237. package/src/assets/svgIcons/way.svg +5 -5
  238. package/src/assets/svgIcons/wifi.svg +3 -3
  239. package/src/assets/svgIcons/winter.svg +3 -3
  240. package/src/assets/svgIcons/workflow_template.svg +11 -11
  241. package/src/assets/theme.js +41 -41
  242. package/src/components/addNewButton/AddNewButton.stories.js +24 -24
  243. package/src/components/addNewButton/index.vue +61 -64
  244. package/src/components/banner/actionBanner/index.vue +64 -65
  245. package/src/components/banner/banner/banner.stories.js +31 -31
  246. package/src/components/banner/banner/index.vue +188 -188
  247. package/src/components/banner/infoBanner/index.vue +57 -69
  248. package/src/components/buttons/buttonIcon/index.vue +145 -142
  249. package/src/components/buttons/closeButton/CloseButton.stories.js +29 -29
  250. package/src/components/buttons/closeButton/index.vue +61 -61
  251. package/src/components/buttons/mainButton/index.vue +140 -140
  252. package/src/components/card/index.vue +96 -96
  253. package/src/components/collapsableInfoText/index.vue +127 -125
  254. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  255. package/src/components/deleteIcon/index.vue +78 -78
  256. package/src/components/draggableInputHandle/index.vue +46 -46
  257. package/src/components/dropdown/Dropdown.stories.js +53 -54
  258. package/src/components/dropdown/index.vue +138 -138
  259. package/src/components/errorMessage/index.vue +64 -64
  260. package/src/components/filter/filterSettings.vue +639 -633
  261. package/src/components/filter/index.vue +154 -154
  262. package/src/components/filter/parentDropdown.vue +91 -91
  263. package/src/components/icon/Icons.stories.js +41 -41
  264. package/src/components/icon/iconCache.js +23 -23
  265. package/src/components/icon/iconCollection.vue +68 -68
  266. package/src/components/icon/index.vue +140 -140
  267. package/src/components/iconWrapper/index.vue +179 -179
  268. package/src/components/infoCard/index.vue +40 -42
  269. package/src/components/infoText/index.vue +170 -165
  270. package/src/components/inputs/checkbox/Checkbox.stories.js +57 -57
  271. package/src/components/inputs/checkbox/index.vue +224 -214
  272. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  273. package/src/components/inputs/inputNumber/index.vue +784 -784
  274. package/src/components/inputs/inputNumberQuestion/index.vue +218 -215
  275. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  276. package/src/components/inputs/inputText/index.vue +376 -375
  277. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  278. package/src/components/inputs/radioButton/index.vue +273 -270
  279. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  280. package/src/components/inputs/searchInput/index.vue +151 -150
  281. package/src/components/inputs/select/index.vue +907 -1028
  282. package/src/components/inputs/select/option/index.vue +148 -139
  283. package/src/components/inputs/select/select.stories.js +58 -59
  284. package/src/components/inputs/slider/index.vue +126 -126
  285. package/src/components/inputs/switchField/index.vue +254 -256
  286. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  287. package/src/components/inputs/textAreaInput/index.vue +198 -200
  288. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  289. package/src/components/inputs/toggle/index.vue +285 -288
  290. package/src/components/label/index.vue +99 -99
  291. package/src/components/markerItem/index.vue +88 -86
  292. package/src/components/modals/actionModal/index.vue +64 -64
  293. package/src/components/modals/infoModal/index.vue +52 -49
  294. package/src/components/modals/modal/index.vue +188 -188
  295. package/src/components/modals/modal/modal.stories.js +31 -31
  296. package/src/components/navigationTabs/index.vue +114 -112
  297. package/src/components/pageSubtitle/index.vue +67 -61
  298. package/src/components/pageTitle/index.vue +68 -68
  299. package/src/components/pagination/index.vue +148 -145
  300. package/src/components/progressBar/index.vue +125 -125
  301. package/src/components/projectMarker/index.vue +300 -298
  302. package/src/components/rangeSlider/Slider.vue +573 -547
  303. package/src/components/rangeSlider/index.vue +517 -517
  304. package/src/components/rangeSlider/utils/dom.js +49 -49
  305. package/src/components/rangeSlider/utils/fns.js +26 -26
  306. package/src/components/selectedOptions/index.vue +145 -145
  307. package/src/components/sideMenu/index.vue +270 -270
  308. package/src/components/spinner/index.vue +68 -68
  309. package/src/components/tableDropdown/index.vue +638 -638
  310. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  311. package/src/components/tables/mainTable/index.vue +510 -493
  312. package/src/components/tables/viewTable/index.vue +195 -195
  313. package/src/components/tabsHeader/index.vue +83 -83
  314. package/src/components/threeDots/index.vue +413 -407
  315. package/src/components/videoThumbnail/index.vue +103 -103
  316. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -35
  317. package/src/helpers/currencyMapping.js +28 -28
  318. package/src/helpers/numberConverter.js +103 -103
  319. package/src/helpers/translateLang.js +128 -128
  320. package/src/main.js +6 -6
  321. package/src/mixins/inputValidations.js +97 -97
  322. package/public/favicon.ico +0 -0
  323. package/public/index.html +0 -17
@@ -1,215 +1,218 @@
1
- <template>
2
- <container>
3
- <input-wrapper>
4
- <input-container
5
- :hasUnit="!!question.unit_short_name"
6
- :placeholder="placeholder"
7
- :isError="isError"
8
- :inputWidth="inputWidth"
9
- :value="textInput"
10
- :hasLength="!!textInput.length"
11
- @input="onChangeHandler"
12
- @blur="onInputBlur()"
13
- @keyup.enter="$emit('on-enter-click')"
14
- />
15
- <unit-container
16
- v-if="question.unit_short_name"
17
- :hasLength="!!textInput.length"
18
- :isError="isError"
19
- >{{ question.unit_short_name }}</unit-container
20
- >
21
- </input-wrapper>
22
- <error-message v-if="isError">{{ errorMessage }}</error-message>
23
- </container>
24
- </template>
25
-
26
- <script>
27
- // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
28
- //This component should be used for questions with input fields only
29
- //How to use:
30
- // <input-number
31
- // placeholder="Enter distance"
32
- // :isError="false" //default is false
33
- // inputWidth="150px" //by default, this is 100%
34
- // :question="question"
35
- // :value="inputValue" //required -- String
36
- // @input-change="onInputChange($event)" //required
37
- // @on-enter-click="onInputSubmit()"
38
- // :errorMessage="Enter a number between 1 and 10"
39
- // />
40
- // question data example:
41
- // question: {
42
- // number_format_precision: 4,
43
- // number_min_allowed: 0,
44
- // number_max_allowed: 10,
45
- // unit_short_name: "cm",
46
- // },
47
- import styled from "vue3-styled-components"
48
- import {
49
- stringToNumber,
50
- numberToString,
51
- } from "../../../helpers/numberConverter"
52
-
53
- const Container = styled.div`
54
- width: 100%;
55
- position: relative;
56
- `
57
-
58
- const inputProps = {
59
- isError: Boolean,
60
- hasUnit: Boolean,
61
- inputWidth: String,
62
- hasLength: Boolean,
63
- }
64
- const InputContainer = styled("input", inputProps)`
65
- border: 1px solid
66
- ${(props) =>
67
- props.isError
68
- ? props.theme.colors.red
69
- : props.hasLength
70
- ? props.theme.colors.primary
71
- : props.theme.colors.mediumGray};
72
- padding: ${(props) =>
73
- props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
74
- border-radius: 4px;
75
- font-size: 16px;
76
- color: ${(props) =>
77
- props.isError ? props.theme.colors.red : props.theme.colors.primary};
78
- width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
79
-
80
- &::placeholder {
81
- color: ${(props) =>
82
- props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
83
- }
84
-
85
- &:focus {
86
- outline: none;
87
- }
88
- `
89
-
90
- const InputWrapper = styled.span`
91
- position: relative;
92
- `
93
-
94
- const UnitContainer = styled("span", inputProps)`
95
- border-left: 1px solid
96
- ${(props) =>
97
- props.isError
98
- ? props.theme.colors.red
99
- : props.hasLength
100
- ? props.theme.colors.primary
101
- : props.theme.colors.mediumGray};
102
- position: absolute;
103
- right: 10px;
104
- top: 0;
105
- padding-left: 10px;
106
- color: ${(props) =>
107
- props.isError
108
- ? props.theme.colors.red
109
- : props.hasLength
110
- ? props.theme.colors.primary
111
- : props.theme.colors.mediumGray};
112
- `
113
-
114
- const ErrorMessage = styled.div`
115
- font-size: 14px;
116
- color: ${(props) => props.theme.colors.red};
117
- padding-top: 16px;
118
- `
119
-
120
- export default {
121
- name: "input-number-question",
122
- components: {
123
- Container,
124
- InputContainer,
125
- InputWrapper,
126
- UnitContainer,
127
- ErrorMessage,
128
- },
129
- data() {
130
- return {
131
- textInput: "",
132
- numberPrecision: 0, // we set this on created. By default is 0
133
- minValue: 0,
134
- maxValue: 100,
135
- }
136
- },
137
- props: {
138
- placeholder: {
139
- required: false,
140
- default: "",
141
- },
142
- isError: {
143
- required: false,
144
- default: false,
145
- },
146
- question: {
147
- required: true,
148
- },
149
- inputWidth: {
150
- required: false,
151
- default: null,
152
- },
153
- value: {
154
- required: true,
155
- default: null,
156
- },
157
- clearInput: {
158
- required: false,
159
- default: false,
160
- },
161
- errorMessage: {
162
- required: false,
163
- default: "Please insert a correct number",
164
- },
165
- },
166
- methods: {
167
- onChangeHandler($event) {
168
- this.textInput = $event
169
- let formattedValue = stringToNumber({
170
- value: $event,
171
- numberPrecision: this.numberPrecision,
172
- })
173
- if (isNaN(formattedValue)) {
174
- this.textInput = ""
175
- formattedValue = ""
176
- }
177
- this.$emit("input-change", formattedValue)
178
- },
179
- onInputBlur() {
180
- let num = stringToNumber({
181
- value: this.textInput,
182
- numberPrecision: this.numberPrecision,
183
- })
184
- this.textInput = numberToString({
185
- value: num,
186
- numberPrecision: this.numberPrecision,
187
- })
188
- },
189
- },
190
- created() {
191
- this.numberPrecision = this.question.number_format_precision
192
- this.minValue = this.question.number_min_allowed
193
- this.maxValue = this.question.number_max_allowed
194
- if (this.value) {
195
- this.textInput = numberToString({
196
- value: this.value,
197
- numberPrecision: this.numberPrecision,
198
- })
199
- }
200
- },
201
- watch: {
202
- clearInput: function (value) {
203
- if (value) {
204
- // If the value is typed, then we should clear the textInput on Continue
205
- this.textInput = ""
206
- }
207
- },
208
- question: function (value) {
209
- this.numberPrecision = value.number_format_precision
210
- this.minValue = value.number_min_allowed
211
- this.maxValue = value.number_max_allowed
212
- },
213
- },
214
- }
215
- </script>
1
+ <template>
2
+ <Container>
3
+ <InputWrapper>
4
+ <InputContainer
5
+ :has-length="!!textInput.length"
6
+ :has-unit="!!question.unit_short_name"
7
+ :input-width="inputWidth"
8
+ :is-error="isError"
9
+ :placeholder="placeholder"
10
+ :value="textInput"
11
+ @blur="onInputBlur()"
12
+ @input="onChangeHandler"
13
+ @keyup.enter="$emit('on-enter-click')"
14
+ />
15
+ <UnitContainer
16
+ v-if="question.unit_short_name"
17
+ :has-length="!!textInput.length"
18
+ :is-error="isError"
19
+ >
20
+ {{ question.unit_short_name }}
21
+ </UnitContainer>
22
+ </InputWrapper>
23
+ <ErrorMessage v-if="isError">
24
+ {{ errorMessage }}
25
+ </ErrorMessage>
26
+ </Container>
27
+ </template>
28
+
29
+ <script>
30
+ // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
31
+ //This component should be used for questions with input fields only
32
+ //How to use:
33
+ // <input-number
34
+ // placeholder="Enter distance"
35
+ // :isError="false" //default is false
36
+ // inputWidth="150px" //by default, this is 100%
37
+ // :question="question"
38
+ // :value="inputValue" //required -- String
39
+ // @input-change="onInputChange($event)" //required
40
+ // @on-enter-click="onInputSubmit()"
41
+ // :errorMessage="Enter a number between 1 and 10"
42
+ // />
43
+ // question data example:
44
+ // question: {
45
+ // number_format_precision: 4,
46
+ // number_min_allowed: 0,
47
+ // number_max_allowed: 10,
48
+ // unit_short_name: "cm",
49
+ // },
50
+ import styled from 'vue3-styled-components'
51
+ import {
52
+ stringToNumber,
53
+ numberToString,
54
+ } from '../../../helpers/numberConverter'
55
+
56
+ const Container = styled.div`
57
+ width: 100%;
58
+ position: relative;
59
+ `
60
+
61
+ const inputProps = {
62
+ isError: Boolean,
63
+ hasUnit: Boolean,
64
+ inputWidth: String,
65
+ hasLength: Boolean,
66
+ }
67
+ const InputContainer = styled('input', inputProps)`
68
+ border: 1px solid
69
+ ${(props) =>
70
+ props.isError
71
+ ? props.theme.colors.red
72
+ : props.hasLength
73
+ ? props.theme.colors.primary
74
+ : props.theme.colors.mediumGray};
75
+ padding: ${(props) =>
76
+ props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
77
+ border-radius: 4px;
78
+ font-size: 16px;
79
+ color: ${(props) =>
80
+ props.isError ? props.theme.colors.red : props.theme.colors.primary};
81
+ width: ${(props) => (props.inputWidth ? props.inputWidth : 'auto')};
82
+
83
+ &::placeholder {
84
+ color: ${(props) =>
85
+ props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
86
+ }
87
+
88
+ &:focus {
89
+ outline: none;
90
+ }
91
+ `
92
+
93
+ const InputWrapper = styled.span`
94
+ position: relative;
95
+ `
96
+
97
+ const UnitContainer = styled('span', inputProps)`
98
+ border-left: 1px solid
99
+ ${(props) =>
100
+ props.isError
101
+ ? props.theme.colors.red
102
+ : props.hasLength
103
+ ? props.theme.colors.primary
104
+ : props.theme.colors.mediumGray};
105
+ position: absolute;
106
+ right: 10px;
107
+ top: 0;
108
+ padding-left: 10px;
109
+ color: ${(props) =>
110
+ props.isError
111
+ ? props.theme.colors.red
112
+ : props.hasLength
113
+ ? props.theme.colors.primary
114
+ : props.theme.colors.mediumGray};
115
+ `
116
+
117
+ const ErrorMessage = styled.div`
118
+ font-size: 14px;
119
+ color: ${(props) => props.theme.colors.red};
120
+ padding-top: 16px;
121
+ `
122
+
123
+ export default {
124
+ name: 'InputNumberQuestion',
125
+ components: {
126
+ Container,
127
+ InputContainer,
128
+ InputWrapper,
129
+ UnitContainer,
130
+ ErrorMessage,
131
+ },
132
+ props: {
133
+ placeholder: {
134
+ required: false,
135
+ default: '',
136
+ },
137
+ isError: {
138
+ required: false,
139
+ default: false,
140
+ },
141
+ question: {
142
+ required: true,
143
+ },
144
+ inputWidth: {
145
+ required: false,
146
+ default: null,
147
+ },
148
+ value: {
149
+ required: true,
150
+ default: null,
151
+ },
152
+ clearInput: {
153
+ required: false,
154
+ default: false,
155
+ },
156
+ errorMessage: {
157
+ required: false,
158
+ default: 'Please insert a correct number',
159
+ },
160
+ },
161
+ data() {
162
+ return {
163
+ textInput: '',
164
+ numberPrecision: 0, // we set this on created. By default is 0
165
+ minValue: 0,
166
+ maxValue: 100,
167
+ }
168
+ },
169
+ watch: {
170
+ clearInput: function (value) {
171
+ if (value) {
172
+ // If the value is typed, then we should clear the textInput on Continue
173
+ this.textInput = ''
174
+ }
175
+ },
176
+ question: function (value) {
177
+ this.numberPrecision = value.number_format_precision
178
+ this.minValue = value.number_min_allowed
179
+ this.maxValue = value.number_max_allowed
180
+ },
181
+ },
182
+ created() {
183
+ this.numberPrecision = this.question.number_format_precision
184
+ this.minValue = this.question.number_min_allowed
185
+ this.maxValue = this.question.number_max_allowed
186
+ if (this.value) {
187
+ this.textInput = numberToString({
188
+ value: this.value,
189
+ numberPrecision: this.numberPrecision,
190
+ })
191
+ }
192
+ },
193
+ methods: {
194
+ onChangeHandler($event) {
195
+ this.textInput = $event
196
+ let formattedValue = stringToNumber({
197
+ value: $event,
198
+ numberPrecision: this.numberPrecision,
199
+ })
200
+ if (isNaN(formattedValue)) {
201
+ this.textInput = ''
202
+ formattedValue = ''
203
+ }
204
+ this.$emit('input-change', formattedValue)
205
+ },
206
+ onInputBlur() {
207
+ let num = stringToNumber({
208
+ value: this.textInput,
209
+ numberPrecision: this.numberPrecision,
210
+ })
211
+ this.textInput = numberToString({
212
+ value: num,
213
+ numberPrecision: this.numberPrecision,
214
+ })
215
+ },
216
+ },
217
+ }
218
+ </script>
@@ -1,75 +1,75 @@
1
- import InputText from "./index.vue"
2
-
3
- export default {
4
- title: "InputText",
5
- component: InputText,
6
- // argTypes: {},
7
- }
8
-
9
- const Template = (args, { argTypes }) => ({
10
- // Components used in your story `template` are defined in the `components` object
11
- components: { InputText },
12
- // The story's `args` need to be mapped into the template through the `setup()` method
13
- props: Object.keys(argTypes),
14
- template: '<input-text v-bind="$props" />',
15
-
16
- // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
17
- // To use:
18
- // <input-text
19
- // placeholder="Company name"
20
- // :value="companyName"
21
- // @input-change="onInputChange({ value: $event, type: 'companyName' })"
22
- // :isError="checkErrors()"
23
- // :errorMessage="This is my error message"
24
- // infoTextAlign="right" // left by default
25
- // infoTextMessage="My info message"
26
- // label="Question 5"
27
- // alignItems="horizontal" // horizontal, vertical
28
- // inputWidth="250px"
29
- // minWidth="100px"
30
- // />
31
- })
32
-
33
- export const Default = Template.bind({})
34
- Default.args = {
35
- placeholder: "Company name",
36
- disabled: false,
37
- value: "",
38
- inputWidth: "200px",
39
- minWidth: "10ch",
40
- unitName: "pc",
41
- isError: false,
42
- textAlign: "left",
43
- }
44
-
45
- export const hasError = Template.bind({})
46
- hasError.args = {
47
- placeholder: "Enter Value",
48
- errorMessage: "This field is required",
49
- isError: true,
50
- disabled: false,
51
- inputWidth: "200px",
52
- }
53
-
54
- export const Disabled = Template.bind({})
55
- Disabled.args = {
56
- placeholder: "Enter Value",
57
- disabled: true,
58
- value: "",
59
- inputWidth: "200px",
60
- isError: false,
61
- }
62
-
63
- export const WithLabel = Template.bind({})
64
- WithLabel.args = {
65
- placeholder: "Company name",
66
- disabled: false,
67
- label: "What is the best company in Switzerland?",
68
- value: "Eturnity",
69
- inputWidth: "200px",
70
- unitName: "pc",
71
- isError: false,
72
- errorMessage: "Maximum 5 characters",
73
- textAlign: "left",
74
- alignItems: "vertical",
75
- }
1
+ import InputText from './index.vue'
2
+
3
+ export default {
4
+ title: 'InputText',
5
+ component: InputText,
6
+ // argTypes: {},
7
+ }
8
+
9
+ const Template = (args, { argTypes }) => ({
10
+ // Components used in your story `template` are defined in the `components` object
11
+ components: { InputText },
12
+ // The story's `args` need to be mapped into the template through the `setup()` method
13
+ props: Object.keys(argTypes),
14
+ template: '<input-text v-bind="$props" />',
15
+
16
+ // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
17
+ // To use:
18
+ // <input-text
19
+ // placeholder="Company name"
20
+ // :value="companyName"
21
+ // @input-change="onInputChange({ value: $event, type: 'companyName' })"
22
+ // :isError="checkErrors()"
23
+ // :errorMessage="This is my error message"
24
+ // infoTextAlign="right" // left by default
25
+ // infoTextMessage="My info message"
26
+ // label="Question 5"
27
+ // alignItems="horizontal" // horizontal, vertical
28
+ // inputWidth="250px"
29
+ // minWidth="100px"
30
+ // />
31
+ })
32
+
33
+ export const Default = Template.bind({})
34
+ Default.args = {
35
+ placeholder: 'Company name',
36
+ disabled: false,
37
+ value: '',
38
+ inputWidth: '200px',
39
+ minWidth: '10ch',
40
+ unitName: 'pc',
41
+ isError: false,
42
+ textAlign: 'left',
43
+ }
44
+
45
+ export const hasError = Template.bind({})
46
+ hasError.args = {
47
+ placeholder: 'Enter Value',
48
+ errorMessage: 'This field is required',
49
+ isError: true,
50
+ disabled: false,
51
+ inputWidth: '200px',
52
+ }
53
+
54
+ export const Disabled = Template.bind({})
55
+ Disabled.args = {
56
+ placeholder: 'Enter Value',
57
+ disabled: true,
58
+ value: '',
59
+ inputWidth: '200px',
60
+ isError: false,
61
+ }
62
+
63
+ export const WithLabel = Template.bind({})
64
+ WithLabel.args = {
65
+ placeholder: 'Company name',
66
+ disabled: false,
67
+ label: 'What is the best company in Switzerland?',
68
+ value: 'Eturnity',
69
+ inputWidth: '200px',
70
+ unitName: 'pc',
71
+ isError: false,
72
+ errorMessage: 'Maximum 5 characters',
73
+ textAlign: 'left',
74
+ alignItems: 'vertical',
75
+ }