@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,154 +1,154 @@
1
- <template>
2
- <page-wrapper ref="dropdown">
3
- <parent-dropdown
4
- @on-toggle="onToggleDropdown()"
5
- :isOpen="isDropdownOpen"
6
- :dropdownText="dropdownText ? dropdownText : 'Default view'"
7
- />
8
- <filter-settings
9
- v-if="isDropdownOpen"
10
- :filterData="filterData"
11
- :filterViews="filterViews"
12
- :buttonText="buttonText"
13
- @on-view-select="onViewSelect($event)"
14
- @on-view-delete="onViewDelete($event)"
15
- @on-save-new-view="$emit('on-save-new-view')"
16
- @on-filter-change="onFilterChange($event)"
17
- @on-cancel-view="onCancelSettings()"
18
- @on-drag-change="$emit('on-drag-change', $event)"
19
- @on-apply-current-view="onApplyCurrentView()"
20
- @on-prevent-close="onPreventClose($event)"
21
- @on-reset-filters="onResetFilters()"
22
- @on-container-click="onContainerClick()"
23
- :hasActiveView="hasActiveView"
24
- :activeView="activeView"
25
- :activeLanguage="activeLanguage"
26
- :settingsTranslations="settingsTranslations"
27
- />
28
- </page-wrapper>
29
- </template>
30
-
31
- <script>
32
- import styled from 'vue3-styled-components'
33
- import parentDropdown from './parentDropdown'
34
- import filterSettings from './filterSettings'
35
-
36
- const PageWrapper = styled.div`
37
- position: relative;
38
- `
39
-
40
- export default {
41
- name: 'filter-component',
42
- components: {
43
- parentDropdown,
44
- PageWrapper,
45
- filterSettings
46
- },
47
- props: {
48
- filterData: {
49
- required: true
50
- },
51
- dropdownText: {
52
- required: false
53
- },
54
- filterViews: {
55
- required: true
56
- },
57
- activeView: {
58
- required: false,
59
- default: null
60
- },
61
- buttonText: {
62
- required: false
63
- },
64
- hasActiveView: {
65
- required: false
66
- },
67
- activeLanguage: {
68
- required: false,
69
- default: 'en-us'
70
- },
71
- settingsTranslations: {
72
- required: false
73
- },
74
- closeDropdown: {
75
- required: false
76
- }
77
- },
78
- data() {
79
- return {
80
- isDropdownOpen: false,
81
- activeFilter: null,
82
- preventOutsideClick: false
83
- }
84
- },
85
- methods: {
86
- onToggleDropdown() {
87
- this.isDropdownOpen = !this.isDropdownOpen
88
- },
89
- onContainerClick() {
90
- // due to newer versions of Chrome (121), contains() is not always working.
91
- // So, we need to add this so that the filter modal won't close
92
- // when we open a dropdown. EPDM-9732
93
- this.preventOutsideClick = true
94
- setTimeout(() => {
95
- this.preventOutsideClick = false
96
- }, 100)
97
- },
98
- clickOutside(event) {
99
- if (
100
- this.$refs.dropdown &&
101
- !this.$refs.dropdown.$el.contains(event.target) &&
102
- !this.preventOutsideClick
103
- ) {
104
- this.isDropdownOpen = false
105
- }
106
- },
107
- onPreventClose(value) {
108
- setTimeout(() => {
109
- this.preventOutsideClick = value
110
- }, 100)
111
- },
112
- onFilterChange(data) {
113
- // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
114
- // because clicking the calendar does not trigger the @focus
115
- this.preventOutsideClick = true
116
- this.$emit('on-filter-settings-change', data)
117
- this.onPreventClose(false)
118
- },
119
- onCancelSettings() {
120
- this.onToggleDropdown()
121
- this.$emit('on-cancel-view')
122
- },
123
- onViewSelect(item) {
124
- this.onToggleDropdown()
125
- this.$emit('on-filter-view-select', item)
126
- },
127
- onViewDelete(item) {
128
- this.onToggleDropdown()
129
- this.$emit('on-filter-view-delete', item)
130
- },
131
- onApplyCurrentView() {
132
- this.onToggleDropdown()
133
- this.$emit('on-apply-current-view')
134
- },
135
- onResetFilters() {
136
- this.onToggleDropdown()
137
- this.$emit('on-reset-filters')
138
- }
139
- },
140
- mounted() {
141
- document.addEventListener('click', this.clickOutside)
142
- },
143
- beforeDestroy() {
144
- document.removeEventListener('click', this.clickOutside)
145
- },
146
- watch: {
147
- closeDropdown(newVal) {
148
- if (newVal) {
149
- this.isDropdownOpen = false
150
- }
151
- }
152
- }
153
- }
154
- </script>
1
+ <template>
2
+ <PageWrapper ref="dropdown">
3
+ <ParentDropdown
4
+ :dropdown-text="dropdownText ? dropdownText : 'Default view'"
5
+ :is-open="isDropdownOpen"
6
+ @on-toggle="onToggleDropdown()"
7
+ />
8
+ <FilterSettings
9
+ v-if="isDropdownOpen"
10
+ :active-language="activeLanguage"
11
+ :active-view="activeView"
12
+ :button-text="buttonText"
13
+ :filter-data="filterData"
14
+ :filter-views="filterViews"
15
+ :has-active-view="hasActiveView"
16
+ :settings-translations="settingsTranslations"
17
+ @on-apply-current-view="onApplyCurrentView()"
18
+ @on-cancel-view="onCancelSettings()"
19
+ @on-container-click="onContainerClick()"
20
+ @on-drag-change="$emit('on-drag-change', $event)"
21
+ @on-filter-change="onFilterChange($event)"
22
+ @on-prevent-close="onPreventClose($event)"
23
+ @on-reset-filters="onResetFilters()"
24
+ @on-save-new-view="$emit('on-save-new-view')"
25
+ @on-view-delete="onViewDelete($event)"
26
+ @on-view-select="onViewSelect($event)"
27
+ />
28
+ </PageWrapper>
29
+ </template>
30
+
31
+ <script>
32
+ import styled from 'vue3-styled-components'
33
+ import ParentDropdown from './parentDropdown'
34
+ import FilterSettings from './filterSettings'
35
+
36
+ const PageWrapper = styled.div`
37
+ position: relative;
38
+ `
39
+
40
+ export default {
41
+ name: 'FilterComponent',
42
+ components: {
43
+ ParentDropdown,
44
+ PageWrapper,
45
+ FilterSettings,
46
+ },
47
+ props: {
48
+ filterData: {
49
+ required: true,
50
+ },
51
+ dropdownText: {
52
+ required: false,
53
+ },
54
+ filterViews: {
55
+ required: true,
56
+ },
57
+ activeView: {
58
+ required: false,
59
+ default: null,
60
+ },
61
+ buttonText: {
62
+ required: false,
63
+ },
64
+ hasActiveView: {
65
+ required: false,
66
+ },
67
+ activeLanguage: {
68
+ required: false,
69
+ default: 'en-us',
70
+ },
71
+ settingsTranslations: {
72
+ required: false,
73
+ },
74
+ closeDropdown: {
75
+ required: false,
76
+ },
77
+ },
78
+ data() {
79
+ return {
80
+ isDropdownOpen: false,
81
+ activeFilter: null,
82
+ preventOutsideClick: false,
83
+ }
84
+ },
85
+ watch: {
86
+ closeDropdown(newVal) {
87
+ if (newVal) {
88
+ this.isDropdownOpen = false
89
+ }
90
+ },
91
+ },
92
+ mounted() {
93
+ document.addEventListener('click', this.clickOutside)
94
+ },
95
+ beforeDestroy() {
96
+ document.removeEventListener('click', this.clickOutside)
97
+ },
98
+ methods: {
99
+ onToggleDropdown() {
100
+ this.isDropdownOpen = !this.isDropdownOpen
101
+ },
102
+ onContainerClick() {
103
+ // due to newer versions of Chrome (121), contains() is not always working.
104
+ // So, we need to add this so that the filter modal won't close
105
+ // when we open a dropdown. EPDM-9732
106
+ this.preventOutsideClick = true
107
+ setTimeout(() => {
108
+ this.preventOutsideClick = false
109
+ }, 100)
110
+ },
111
+ clickOutside(event) {
112
+ if (
113
+ this.$refs.dropdown &&
114
+ !this.$refs.dropdown.$el.contains(event.target) &&
115
+ !this.preventOutsideClick
116
+ ) {
117
+ this.isDropdownOpen = false
118
+ }
119
+ },
120
+ onPreventClose(value) {
121
+ setTimeout(() => {
122
+ this.preventOutsideClick = value
123
+ }, 100)
124
+ },
125
+ onFilterChange(data) {
126
+ // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
127
+ // because clicking the calendar does not trigger the @focus
128
+ this.preventOutsideClick = true
129
+ this.$emit('on-filter-settings-change', data)
130
+ this.onPreventClose(false)
131
+ },
132
+ onCancelSettings() {
133
+ this.onToggleDropdown()
134
+ this.$emit('on-cancel-view')
135
+ },
136
+ onViewSelect(item) {
137
+ this.onToggleDropdown()
138
+ this.$emit('on-filter-view-select', item)
139
+ },
140
+ onViewDelete(item) {
141
+ this.onToggleDropdown()
142
+ this.$emit('on-filter-view-delete', item)
143
+ },
144
+ onApplyCurrentView() {
145
+ this.onToggleDropdown()
146
+ this.$emit('on-apply-current-view')
147
+ },
148
+ onResetFilters() {
149
+ this.onToggleDropdown()
150
+ this.$emit('on-reset-filters')
151
+ },
152
+ },
153
+ }
154
+ </script>
@@ -1,91 +1,91 @@
1
- <template>
2
- <page-wrapper @click="$emit('on-toggle')">
3
- <icon-wrapper>
4
- <icon name="settings" size="18px" />
5
- </icon-wrapper>
6
- <title-wrapper :isOpen="isOpen">
7
- <title-text>
8
- {{ dropdownText }}
9
- </title-text>
10
- <arrow-wrapper>
11
- <icon
12
- @click.stop="$emit('on-toggle')"
13
- :name="isOpen ? 'arrow_up' : 'arrow_down'"
14
- size="12px"
15
- />
16
- </arrow-wrapper>
17
- </title-wrapper>
18
- </page-wrapper>
19
- </template>
20
-
21
- <script>
22
- import styled from 'vue3-styled-components'
23
- import Icon from '../icon'
24
-
25
- const PageWrapper = styled.div`
26
- display: grid;
27
- grid-template-columns: auto auto;
28
- cursor: pointer;
29
- `
30
-
31
- const IconWrapper = styled.div`
32
- display: grid;
33
- align-items: center;
34
- justify-items: center;
35
- border: 1px solid ${(props) => props.theme.colors.grey4};
36
- border-radius: 4px 0px 0px 4px;
37
- padding: 6px;
38
- `
39
-
40
- const TitleAttrs = { isOpen: Boolean }
41
- const TitleWrapper = styled('div', TitleAttrs)`
42
- display: grid;
43
- grid-template-columns: auto auto;
44
- align-items: center;
45
- justify-items: center;
46
- grid-gap: 10px;
47
- border: 1px solid ${(props) => props.theme.colors.grey4};
48
- background-color: ${(props) =>
49
- props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
50
- border-left: none;
51
- border-radius: 0px 4px 4px 0px;
52
- padding: 6px 14px;
53
- user-select: none;
54
- `
55
-
56
- const TitleText = styled.div`
57
- font-size: 13px;
58
- `
59
-
60
- const ArrowWrapper = styled.div`
61
- display: grid;
62
- align-items: center;
63
-
64
- div {
65
- height: auto !important;
66
- min-height: unset;
67
- }
68
- `
69
-
70
- export default {
71
- name: 'parent-dropdown',
72
- components: {
73
- PageWrapper,
74
- Icon,
75
- IconWrapper,
76
- TitleWrapper,
77
- TitleText,
78
- ArrowWrapper
79
- },
80
- props: {
81
- isOpen: {
82
- required: true,
83
- default: false
84
- },
85
- dropdownText: {
86
- required: true,
87
- default: 'View'
88
- }
89
- }
90
- }
91
- </script>
1
+ <template>
2
+ <PageWrapper @click="$emit('on-toggle')">
3
+ <IconWrapper>
4
+ <Icon name="settings" size="18px" />
5
+ </IconWrapper>
6
+ <TitleWrapper :is-open="isOpen">
7
+ <TitleText>
8
+ {{ dropdownText }}
9
+ </TitleText>
10
+ <ArrowWrapper>
11
+ <Icon
12
+ :name="isOpen ? 'arrow_up' : 'arrow_down'"
13
+ size="12px"
14
+ @click.stop="$emit('on-toggle')"
15
+ />
16
+ </ArrowWrapper>
17
+ </TitleWrapper>
18
+ </PageWrapper>
19
+ </template>
20
+
21
+ <script>
22
+ import styled from 'vue3-styled-components'
23
+ import Icon from '../icon'
24
+
25
+ const PageWrapper = styled.div`
26
+ display: grid;
27
+ grid-template-columns: auto auto;
28
+ cursor: pointer;
29
+ `
30
+
31
+ const IconWrapper = styled.div`
32
+ display: grid;
33
+ align-items: center;
34
+ justify-items: center;
35
+ border: 1px solid ${(props) => props.theme.colors.grey4};
36
+ border-radius: 4px 0px 0px 4px;
37
+ padding: 6px;
38
+ `
39
+
40
+ const TitleAttrs = { isOpen: Boolean }
41
+ const TitleWrapper = styled('div', TitleAttrs)`
42
+ display: grid;
43
+ grid-template-columns: auto auto;
44
+ align-items: center;
45
+ justify-items: center;
46
+ grid-gap: 10px;
47
+ border: 1px solid ${(props) => props.theme.colors.grey4};
48
+ background-color: ${(props) =>
49
+ props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
50
+ border-left: none;
51
+ border-radius: 0px 4px 4px 0px;
52
+ padding: 6px 14px;
53
+ user-select: none;
54
+ `
55
+
56
+ const TitleText = styled.div`
57
+ font-size: 13px;
58
+ `
59
+
60
+ const ArrowWrapper = styled.div`
61
+ display: grid;
62
+ align-items: center;
63
+
64
+ div {
65
+ height: auto !important;
66
+ min-height: unset;
67
+ }
68
+ `
69
+
70
+ export default {
71
+ name: 'ParentDropdown',
72
+ components: {
73
+ PageWrapper,
74
+ Icon,
75
+ IconWrapper,
76
+ TitleWrapper,
77
+ TitleText,
78
+ ArrowWrapper,
79
+ },
80
+ props: {
81
+ isOpen: {
82
+ required: true,
83
+ default: false,
84
+ },
85
+ dropdownText: {
86
+ required: true,
87
+ default: 'View',
88
+ },
89
+ },
90
+ }
91
+ </script>
@@ -1,41 +1,41 @@
1
- import iconCollection from './iconCollection.vue'
2
-
3
- export default {
4
- title: 'icon',
5
- component: iconCollection
6
- // argTypes: {},
7
- }
8
-
9
- const Template = (args, { argTypes }) => ({
10
- // Components used in your story `template` are defined in the `components` object
11
- components: { iconCollection },
12
- // The story's `args` need to be mapped into the template through the `setup()` method
13
- props: Object.keys(argTypes),
14
- template: '<iconCollection v-bind="$props" />'
15
-
16
- // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
17
- // How to use:
18
- //<icon
19
- // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
20
- // color="red"
21
- // hoveredColor="blue"
22
- // size="60px" by default, this is 30px
23
- // />
24
- })
25
-
26
- export const Default = Template.bind({})
27
- Default.args = {
28
- size: '30px'
29
- }
30
-
31
- export const withColor = Template.bind({})
32
- withColor.args = {
33
- size: '30px',
34
- color: 'red',
35
- hoveredColor: 'crimson'
36
- }
37
-
38
- export const large = Template.bind({})
39
- large.args = {
40
- size: '60px'
41
- }
1
+ import IconCollection from './iconCollection.vue'
2
+
3
+ export default {
4
+ title: 'icon',
5
+ component: IconCollection,
6
+ // argTypes: {},
7
+ }
8
+
9
+ const Template = (args, { argTypes }) => ({
10
+ // Components used in your story `template` are defined in the `components` object
11
+ components: { IconCollection },
12
+ // The story's `args` need to be mapped into the template through the `setup()` method
13
+ props: Object.keys(argTypes),
14
+ template: '<IconCollection v-bind="$props" />',
15
+
16
+ // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
17
+ // How to use:
18
+ //<icon
19
+ // name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
20
+ // color="red"
21
+ // hoveredColor="blue"
22
+ // size="60px" by default, this is 30px
23
+ // />
24
+ })
25
+
26
+ export const Default = Template.bind({})
27
+ Default.args = {
28
+ size: '30px',
29
+ }
30
+
31
+ export const withColor = Template.bind({})
32
+ withColor.args = {
33
+ size: '30px',
34
+ color: 'red',
35
+ hoveredColor: 'crimson',
36
+ }
37
+
38
+ export const large = Template.bind({})
39
+ large.args = {
40
+ size: '60px',
41
+ }
@@ -1,23 +1,23 @@
1
- const iconCache = {}
2
-
3
- export const fetchIcon = async (fileName) => {
4
- if (iconCache[fileName]) {
5
- return iconCache[fileName]
6
- }
7
-
8
- // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
9
- const fetchUrl = new URL(
10
- `../../assets/svgIcons/${fileName}.svg`,
11
- import.meta.url
12
- ).href
13
-
14
- try {
15
- const response = await fetch(fetchUrl)
16
- const rawFile = await response.text()
17
- iconCache[fileName] = rawFile
18
-
19
- return rawFile
20
- } catch (error) {
21
- console.error(`Failed to load ${fileName}.svg`)
22
- }
23
- }
1
+ const iconCache = {}
2
+
3
+ export const fetchIcon = async (fileName) => {
4
+ if (iconCache[fileName]) {
5
+ return iconCache[fileName]
6
+ }
7
+
8
+ // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
9
+ const fetchUrl = new URL(
10
+ `../../assets/svgIcons/${fileName}.svg`,
11
+ import.meta.url
12
+ ).href
13
+
14
+ try {
15
+ const response = await fetch(fetchUrl)
16
+ const rawFile = await response.text()
17
+ iconCache[fileName] = rawFile
18
+
19
+ return rawFile
20
+ } catch (error) {
21
+ console.error(`Failed to load ${fileName}.svg`)
22
+ }
23
+ }