@eturnity/eturnity_reusable_components 7.37.5 → 7.39.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (342) hide show
  1. package/README.md +29 -29
  2. package/package.json +85 -85
  3. package/src/App.vue +30 -30
  4. package/src/Test.vue +128 -128
  5. package/src/assets/icons/arrow_down.svg +3 -3
  6. package/src/assets/icons/arrow_up_red.svg +3 -3
  7. package/src/assets/icons/black_spinner.svg +35 -35
  8. package/src/assets/icons/delete_icon.svg +11 -11
  9. package/src/assets/icons/delete_icon_gray.svg +11 -11
  10. package/src/assets/icons/drag_icon.svg +8 -8
  11. package/src/assets/icons/external_icon.svg +6 -6
  12. package/src/assets/icons/language_icon.svg +6 -6
  13. package/src/assets/icons/pdf_icon.svg +6 -6
  14. package/src/assets/icons/plus_button.svg +4 -4
  15. package/src/assets/icons/search_icon_black.svg +3 -3
  16. package/src/assets/icons/subposition_icon.svg +3 -3
  17. package/src/assets/icons/subposition_marker.svg +3 -3
  18. package/src/assets/icons/warning_icon.svg +3 -3
  19. package/src/assets/svgIcons/2d_active.svg +7 -7
  20. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  21. package/src/assets/svgIcons/3d_active.svg +7 -7
  22. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  23. package/src/assets/svgIcons/_readme.md +7 -7
  24. package/src/assets/svgIcons/accept.svg +5 -5
  25. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  26. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  27. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  28. package/src/assets/svgIcons/add_icon.svg +4 -4
  29. package/src/assets/svgIcons/address_book.svg +3 -3
  30. package/src/assets/svgIcons/adjust_roof.svg +6 -6
  31. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  32. package/src/assets/svgIcons/all_good.svg +3 -3
  33. package/src/assets/svgIcons/angle_active.svg +5 -5
  34. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  35. package/src/assets/svgIcons/area_active.svg +11 -11
  36. package/src/assets/svgIcons/area_inactive.svg +26 -26
  37. package/src/assets/svgIcons/areas_tool.svg +14 -14
  38. package/src/assets/svgIcons/arrow_down.svg +3 -3
  39. package/src/assets/svgIcons/arrow_left.svg +4 -4
  40. package/src/assets/svgIcons/arrow_right.svg +4 -4
  41. package/src/assets/svgIcons/arrow_up.svg +3 -3
  42. package/src/assets/svgIcons/attachment.svg +3 -3
  43. package/src/assets/svgIcons/base_layer.svg +3 -3
  44. package/src/assets/svgIcons/battery.svg +3 -3
  45. package/src/assets/svgIcons/bell.svg +3 -3
  46. package/src/assets/svgIcons/bexio.svg +4 -4
  47. package/src/assets/svgIcons/bold.svg +3 -3
  48. package/src/assets/svgIcons/bom.svg +3 -3
  49. package/src/assets/svgIcons/bom_generation.svg +10 -10
  50. package/src/assets/svgIcons/bookmaker.svg +3 -3
  51. package/src/assets/svgIcons/bubble.svg +3 -3
  52. package/src/assets/svgIcons/bug.svg +5 -5
  53. package/src/assets/svgIcons/bullet_list.svg +8 -8
  54. package/src/assets/svgIcons/calendar.svg +7 -7
  55. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  56. package/src/assets/svgIcons/call.svg +3 -3
  57. package/src/assets/svgIcons/camera.svg +3 -3
  58. package/src/assets/svgIcons/car.svg +3 -3
  59. package/src/assets/svgIcons/cart.svg +3 -3
  60. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  61. package/src/assets/svgIcons/checkbox.svg +3 -3
  62. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  63. package/src/assets/svgIcons/clickable_info.svg +4 -4
  64. package/src/assets/svgIcons/clip.svg +3 -3
  65. package/src/assets/svgIcons/clock.svg +17 -17
  66. package/src/assets/svgIcons/clock_full.svg +3 -3
  67. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  68. package/src/assets/svgIcons/co_branding.svg +5 -5
  69. package/src/assets/svgIcons/collapse.svg +4 -4
  70. package/src/assets/svgIcons/collections.svg +3 -3
  71. package/src/assets/svgIcons/component_library.svg +7 -7
  72. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  73. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  74. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  75. package/src/assets/svgIcons/context_menu.svg +5 -5
  76. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  77. package/src/assets/svgIcons/cross.svg +4 -4
  78. package/src/assets/svgIcons/current_variant.svg +4 -4
  79. package/src/assets/svgIcons/dashboard.svg +3 -3
  80. package/src/assets/svgIcons/data_transfer.svg +3 -3
  81. package/src/assets/svgIcons/deadline.svg +4 -4
  82. package/src/assets/svgIcons/deal_flow.svg +5 -5
  83. package/src/assets/svgIcons/delete.svg +4 -4
  84. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  85. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  86. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  87. package/src/assets/svgIcons/direction_active.svg +5 -5
  88. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  89. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  90. package/src/assets/svgIcons/dislike.svg +3 -3
  91. package/src/assets/svgIcons/distance_tool.svg +8 -8
  92. package/src/assets/svgIcons/distances_active.svg +9 -9
  93. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  94. package/src/assets/svgIcons/distort_tool.svg +10 -10
  95. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  96. package/src/assets/svgIcons/document.svg +3 -3
  97. package/src/assets/svgIcons/documents.svg +4 -4
  98. package/src/assets/svgIcons/downarrow.svg +3 -3
  99. package/src/assets/svgIcons/download.svg +4 -4
  100. package/src/assets/svgIcons/drag_icon.svg +8 -8
  101. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  102. package/src/assets/svgIcons/draw_tool.svg +3 -3
  103. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  104. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  105. package/src/assets/svgIcons/duplicate.svg +4 -4
  106. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  107. package/src/assets/svgIcons/e_signature.svg +5 -5
  108. package/src/assets/svgIcons/edit_button.svg +3 -3
  109. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  110. package/src/assets/svgIcons/email.svg +3 -3
  111. package/src/assets/svgIcons/ems-1.svg +3 -3
  112. package/src/assets/svgIcons/ems.svg +3 -3
  113. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  114. package/src/assets/svgIcons/erase.svg +4 -4
  115. package/src/assets/svgIcons/external_icon.svg +5 -5
  116. package/src/assets/svgIcons/fav_icon.svg +4 -4
  117. package/src/assets/svgIcons/finance.svg +3 -3
  118. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  119. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  120. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  121. package/src/assets/svgIcons/finish-1.svg +4 -4
  122. package/src/assets/svgIcons/finish.svg +3 -3
  123. package/src/assets/svgIcons/flatten.svg +11 -11
  124. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  125. package/src/assets/svgIcons/folder.svg +3 -3
  126. package/src/assets/svgIcons/free_technology.svg +5 -5
  127. package/src/assets/svgIcons/handle.svg +5 -5
  128. package/src/assets/svgIcons/heat_calc.svg +7 -7
  129. package/src/assets/svgIcons/height_equalize.svg +3 -3
  130. package/src/assets/svgIcons/height_snap.svg +3 -3
  131. package/src/assets/svgIcons/house.svg +3 -3
  132. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  133. package/src/assets/svgIcons/house_3d.svg +7 -7
  134. package/src/assets/svgIcons/inclination.svg +2 -2
  135. package/src/assets/svgIcons/info.svg +3 -3
  136. package/src/assets/svgIcons/initial_situation.svg +3 -3
  137. package/src/assets/svgIcons/integrations.svg +3 -3
  138. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  139. package/src/assets/svgIcons/intro-tour.svg +3 -3
  140. package/src/assets/svgIcons/inverter-1.svg +5 -5
  141. package/src/assets/svgIcons/inverter.svg +3 -3
  142. package/src/assets/svgIcons/italic.svg +3 -3
  143. package/src/assets/svgIcons/key.svg +3 -3
  144. package/src/assets/svgIcons/layers_close.svg +4 -4
  145. package/src/assets/svgIcons/layers_open.svg +4 -4
  146. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  147. package/src/assets/svgIcons/lead_provider.svg +4 -4
  148. package/src/assets/svgIcons/length_2d.svg +2 -2
  149. package/src/assets/svgIcons/length_3d.svg +4 -4
  150. package/src/assets/svgIcons/length_calculator.svg +2 -2
  151. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  152. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  153. package/src/assets/svgIcons/light_bulb.svg +3 -3
  154. package/src/assets/svgIcons/like.svg +3 -3
  155. package/src/assets/svgIcons/line_graph.svg +3 -3
  156. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  157. package/src/assets/svgIcons/location.svg +3 -3
  158. package/src/assets/svgIcons/lock.svg +3 -3
  159. package/src/assets/svgIcons/logout.svg +3 -3
  160. package/src/assets/svgIcons/loop.svg +3 -3
  161. package/src/assets/svgIcons/lunch.svg +4 -4
  162. package/src/assets/svgIcons/magic_tool.svg +6 -6
  163. package/src/assets/svgIcons/map_icon.svg +5 -5
  164. package/src/assets/svgIcons/map_settings.svg +3 -3
  165. package/src/assets/svgIcons/margin_tool.svg +4 -4
  166. package/src/assets/svgIcons/meeting.svg +6 -6
  167. package/src/assets/svgIcons/move_copy.svg +4 -4
  168. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  169. package/src/assets/svgIcons/next.svg +4 -4
  170. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  171. package/src/assets/svgIcons/numbered_list.svg +6 -6
  172. package/src/assets/svgIcons/obstacle_tool.svg +8 -8
  173. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  174. package/src/assets/svgIcons/offset_tool.svg +8 -8
  175. package/src/assets/svgIcons/outline_tool.svg +11 -11
  176. package/src/assets/svgIcons/pan_tool.svg +12 -12
  177. package/src/assets/svgIcons/panels_tool.svg +8 -8
  178. package/src/assets/svgIcons/pen_tool.svg +4 -4
  179. package/src/assets/svgIcons/picker_tool.svg +4 -4
  180. package/src/assets/svgIcons/picture.svg +3 -3
  181. package/src/assets/svgIcons/pin.svg +5 -5
  182. package/src/assets/svgIcons/presentation.svg +3 -3
  183. package/src/assets/svgIcons/previous.svg +4 -4
  184. package/src/assets/svgIcons/profile-1.svg +4 -4
  185. package/src/assets/svgIcons/profile.svg +4 -4
  186. package/src/assets/svgIcons/profitability.svg +3 -3
  187. package/src/assets/svgIcons/project_analysis.svg +4 -4
  188. package/src/assets/svgIcons/project_settings.svg +4 -4
  189. package/src/assets/svgIcons/pv.svg +3 -3
  190. package/src/assets/svgIcons/quotations.svg +6 -6
  191. package/src/assets/svgIcons/redo.svg +6 -6
  192. package/src/assets/svgIcons/resizer.svg +5 -5
  193. package/src/assets/svgIcons/roof_layer.svg +3 -3
  194. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  195. package/src/assets/svgIcons/rotate_view.svg +5 -5
  196. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  197. package/src/assets/svgIcons/run_simulation.svg +3 -3
  198. package/src/assets/svgIcons/save.svg +3 -3
  199. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  200. package/src/assets/svgIcons/search.svg +3 -3
  201. package/src/assets/svgIcons/security.svg +3 -3
  202. package/src/assets/svgIcons/settings.svg +3 -3
  203. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  204. package/src/assets/svgIcons/smartphone.svg +4 -4
  205. package/src/assets/svgIcons/solar_calc.svg +13 -13
  206. package/src/assets/svgIcons/sorting.svg +4 -4
  207. package/src/assets/svgIcons/split.svg +12 -12
  208. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  209. package/src/assets/svgIcons/strikethrough.svg +4 -4
  210. package/src/assets/svgIcons/subscriptions.svg +3 -3
  211. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  212. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  213. package/src/assets/svgIcons/subsidies.svg +3 -3
  214. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  215. package/src/assets/svgIcons/suitcase.svg +3 -3
  216. package/src/assets/svgIcons/summer.svg +3 -3
  217. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  218. package/src/assets/svgIcons/transfer.svg +4 -4
  219. package/src/assets/svgIcons/trim_tool.svg +4 -4
  220. package/src/assets/svgIcons/truck.svg +3 -3
  221. package/src/assets/svgIcons/underlined.svg +3 -3
  222. package/src/assets/svgIcons/undo.svg +6 -6
  223. package/src/assets/svgIcons/uparrow.svg +3 -3
  224. package/src/assets/svgIcons/update.svg +3 -3
  225. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  226. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  227. package/src/assets/svgIcons/upload_image.svg +8 -8
  228. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  229. package/src/assets/svgIcons/variants.svg +6 -6
  230. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  231. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  232. package/src/assets/svgIcons/warning.svg +4 -4
  233. package/src/assets/svgIcons/way.svg +5 -5
  234. package/src/assets/svgIcons/wifi.svg +3 -3
  235. package/src/assets/svgIcons/winter.svg +3 -3
  236. package/src/assets/svgIcons/workflow_template.svg +11 -11
  237. package/src/assets/tests/__mocks__/iconCache.js +1 -1
  238. package/src/assets/tests/__mocks__/svgMock.js +1 -1
  239. package/src/assets/tests/helpers.js +12 -12
  240. package/src/assets/theme.js +41 -41
  241. package/src/components/addNewButton/AddNewButton.stories.js +17 -17
  242. package/src/components/addNewButton/addNewButton.spec.js +23 -23
  243. package/src/components/addNewButton/index.vue +62 -62
  244. package/src/components/banner/actionBanner/index.vue +64 -64
  245. package/src/components/banner/banner/index.vue +188 -188
  246. package/src/components/banner/infoBanner/index.vue +57 -57
  247. package/src/components/buttons/buttonIcon/index.vue +145 -145
  248. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  249. package/src/components/buttons/closeButton/index.vue +62 -62
  250. package/src/components/buttons/mainButton/MainButton.stories.js +51 -51
  251. package/src/components/buttons/mainButton/index.vue +150 -150
  252. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  253. package/src/components/card/index.vue +96 -96
  254. package/src/components/collapsableInfoText/index.vue +127 -127
  255. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  256. package/src/components/deleteIcon/index.vue +78 -78
  257. package/src/components/draggableInputHandle/index.vue +46 -46
  258. package/src/components/dropdown/Dropdown.stories.js +53 -53
  259. package/src/components/dropdown/index.vue +138 -138
  260. package/src/components/errorMessage/index.vue +64 -64
  261. package/src/components/filter/filterSettings.vue +669 -669
  262. package/src/components/filter/index.vue +154 -154
  263. package/src/components/filter/parentDropdown.vue +91 -91
  264. package/src/components/icon/Icons.stories.js +41 -41
  265. package/src/components/icon/iconCache.mjs +23 -23
  266. package/src/components/icon/iconCollection.vue +82 -82
  267. package/src/components/icon/index.vue +140 -140
  268. package/src/components/iconWrapper/index.vue +179 -179
  269. package/src/components/infoCard/index.vue +40 -40
  270. package/src/components/infoText/index.vue +170 -170
  271. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  272. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  273. package/src/components/inputs/checkbox/index.vue +225 -225
  274. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  275. package/src/components/inputs/inputNumber/index.vue +789 -789
  276. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  277. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  278. package/src/components/inputs/inputText/index.vue +376 -376
  279. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  280. package/src/components/inputs/radioButton/index.vue +273 -273
  281. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  282. package/src/components/inputs/searchInput/index.vue +151 -151
  283. package/src/components/inputs/select/index.vue +910 -908
  284. package/src/components/inputs/select/option/index.vue +156 -148
  285. package/src/components/inputs/select/select.stories.js +58 -58
  286. package/src/components/inputs/slider/index.vue +126 -126
  287. package/src/components/inputs/switchField/index.vue +254 -254
  288. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  289. package/src/components/inputs/textAreaInput/index.vue +198 -198
  290. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  291. package/src/components/inputs/toggle/index.vue +317 -317
  292. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  293. package/src/components/label/index.vue +99 -99
  294. package/src/components/markerItem/index.vue +88 -88
  295. package/src/components/modals/actionModal/index.vue +64 -64
  296. package/src/components/modals/infoModal/index.vue +52 -52
  297. package/src/components/modals/modal/index.vue +190 -188
  298. package/src/components/modals/modal/modal.stories.js +31 -31
  299. package/src/components/navigationTabs/index.vue +114 -114
  300. package/src/components/pageSubtitle/PageSubtitle.stories.js +59 -59
  301. package/src/components/pageSubtitle/index.vue +78 -78
  302. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  303. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  304. package/src/components/pageTitle/index.vue +91 -91
  305. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  306. package/src/components/pagination/index.vue +148 -148
  307. package/src/components/progressBar/index.vue +125 -125
  308. package/src/components/projectMarker/index.vue +300 -300
  309. package/src/components/rangeSlider/Slider.vue +573 -573
  310. package/src/components/rangeSlider/index.vue +517 -517
  311. package/src/components/rangeSlider/utils/dom.js +49 -49
  312. package/src/components/rangeSlider/utils/fns.js +26 -26
  313. package/src/components/selectedOptions/index.vue +450 -145
  314. package/src/components/sideMenu/index.vue +270 -270
  315. package/src/components/spinner/Spinner.stories.js +34 -34
  316. package/src/components/spinner/index.vue +85 -85
  317. package/src/components/spinner/spinner.spec.js +69 -69
  318. package/src/components/tableDropdown/index.vue +638 -638
  319. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  320. package/src/components/tables/mainTable/index.vue +510 -510
  321. package/src/components/tables/viewTable/index.vue +195 -195
  322. package/src/components/tabsHeader/index.vue +83 -83
  323. package/src/components/threeDots/index.vue +413 -413
  324. package/src/components/videoThumbnail/index.vue +103 -103
  325. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
  326. package/src/helpers/currencyMapping.js +28 -28
  327. package/src/helpers/numberConverter.js +103 -103
  328. package/src/helpers/translateLang.js +128 -128
  329. package/src/main.js +7 -7
  330. package/src/mixins/inputValidations.js +97 -97
  331. package/src/router/dynamicRoutes.js +23 -23
  332. package/src/stories/Button.stories.js +48 -48
  333. package/src/stories/Button.vue +52 -52
  334. package/src/stories/Configure.mdx +364 -364
  335. package/src/stories/Header.stories.js +41 -41
  336. package/src/stories/Header.vue +59 -59
  337. package/src/stories/Page.stories.js +30 -30
  338. package/src/stories/Page.vue +83 -83
  339. package/src/stories/button.css +30 -30
  340. package/src/stories/header.css +32 -32
  341. package/src/stories/page.css +69 -69
  342. package/src/utils/index.js +12 -12
@@ -1,195 +1,195 @@
1
- <template>
2
- <PageWrapper>
3
- <TitleText>
4
- {{ tableTitle }}
5
- </TitleText>
6
- <TableScroll>
7
- <TableWrapper :full-width="fullWidth">
8
- <SpinnerWrapper v-if="isLoading">
9
- <Spinner />
10
- </SpinnerWrapper>
11
- <TableContainer v-else>
12
- <thead>
13
- <tr>
14
- <TableHeader v-for="(item, index) in headerItems" :key="index">
15
- {{ item.value }}
16
- </TableHeader>
17
- <div v-if="showIconsContainer && tableItems.length"></div>
18
- </tr>
19
- </thead>
20
- <tbody>
21
- <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
22
- <EmptyContainer>
23
- {{ emptyText }}
24
- </EmptyContainer>
25
- </EmptyTd>
26
- <TableRow v-for="(row, index) in tableItems" v-else :key="index">
27
- <TableItem v-for="(item, idx) in row" :key="idx">
28
- {{ item.value }}
29
- </TableItem>
30
- <IconsContainer v-if="showIconsContainer">
31
- <DeleteIcon
32
- color="gray"
33
- @click="$emit('on-click-delete', index)"
34
- />
35
- </IconsContainer>
36
- </TableRow>
37
- </tbody>
38
- </TableContainer>
39
- </TableWrapper>
40
- </TableScroll>
41
- </PageWrapper>
42
- </template>
43
-
44
- <script>
45
- // This is a read only table. Pass it data, and it displays it
46
- // ToDo: add this to storybook
47
- // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
48
- import styled from 'vue3-styled-components'
49
- import DeleteIcon from '../../deleteIcon'
50
- import Spinner from '../../spinner'
51
-
52
- const TableScroll = styled.div`
53
- position: relative;
54
- max-width: 100%;
55
- `
56
-
57
- const wrapperAttrs = { fullWidth: Boolean }
58
- const TableWrapper = styled('div', wrapperAttrs)`
59
- width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
60
- max-width: 100%;
61
- overflow: auto;
62
-
63
- ::-webkit-scrollbar {
64
- width: 10px; //width of the whole scrollbar area
65
- }
66
-
67
- track ::-webkit-scrollbar-track {
68
- background: #fff;
69
- }
70
-
71
- ::-webkit-scrollbar-thumb {
72
- border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
73
- }
74
- `
75
-
76
- const TableContainer = styled.table`
77
- width: 100%;
78
- border-collapse: collapse;
79
- border: none;
80
- `
81
-
82
- const TableItem = styled.td`
83
- border: 1px solid ${(props) => props.theme.colors.grey3};
84
- width: auto;
85
- white-space: nowrap;
86
- padding: 12px;
87
- text-align: right;
88
- `
89
-
90
- const TableHeader = styled(TableItem)`
91
- background-color: #e6e8ee;
92
- font-weight: 700;
93
- text-align: left;
94
- `
95
-
96
- const TableRow = styled.tr`
97
- &:hover {
98
- background-color: #f5f7fa;
99
- cursor: pointer;
100
- }
101
- `
102
-
103
- const TitleText = styled.div`
104
- font-weight: 700;
105
- margin-bottom: 6px;
106
- `
107
-
108
- const PageWrapper = styled.div`
109
- margin: 16px 0;
110
- font-size: 13px;
111
- `
112
-
113
- const IconsContainer = styled.div`
114
- width: 100%;
115
- display: inline-flex;
116
- flex-wrap: nowrap;
117
- background-color: #fff;
118
-
119
- &:hover {
120
- background-color: #fff;
121
- }
122
- `
123
-
124
- const SpinnerWrapper = styled.div`
125
- border: 1px solid ${(props) => props.theme.colors.grey3};
126
- height: 150px;
127
- display: grid;
128
- align-items: center;
129
- justify-items: center;
130
- `
131
-
132
- const EmptyContainer = styled.div`
133
- display: grid;
134
- align-items: center;
135
- justify-items: center;
136
- height: 100px;
137
- `
138
-
139
- const EmptyTd = styled.td`
140
- border: 1px solid ${(props) => props.theme.colors.grey3};
141
- `
142
-
143
- export default {
144
- name: 'ViewTable',
145
- components: {
146
- TableScroll,
147
- TableWrapper,
148
- TableContainer,
149
- TableHeader,
150
- TableItem,
151
- TableRow,
152
- TitleText,
153
- PageWrapper,
154
- DeleteIcon,
155
- IconsContainer,
156
- Spinner,
157
- SpinnerWrapper,
158
- EmptyContainer,
159
- EmptyTd,
160
- },
161
- props: {
162
- headerItems: {
163
- required: true,
164
- },
165
- tableItems: {
166
- required: true,
167
- },
168
- fullWidth: {
169
- required: false,
170
- default: true,
171
- },
172
- tableTitle: {
173
- required: false,
174
- default: null,
175
- },
176
- showDeleteButton: {
177
- required: false,
178
- default: false,
179
- },
180
- isLoading: {
181
- required: false,
182
- default: false,
183
- },
184
- emptyText: {
185
- required: false,
186
- default: 'There are no items',
187
- },
188
- },
189
- computed: {
190
- showIconsContainer() {
191
- return this.showDeleteButton
192
- },
193
- },
194
- }
195
- </script>
1
+ <template>
2
+ <PageWrapper>
3
+ <TitleText>
4
+ {{ tableTitle }}
5
+ </TitleText>
6
+ <TableScroll>
7
+ <TableWrapper :full-width="fullWidth">
8
+ <SpinnerWrapper v-if="isLoading">
9
+ <Spinner />
10
+ </SpinnerWrapper>
11
+ <TableContainer v-else>
12
+ <thead>
13
+ <tr>
14
+ <TableHeader v-for="(item, index) in headerItems" :key="index">
15
+ {{ item.value }}
16
+ </TableHeader>
17
+ <div v-if="showIconsContainer && tableItems.length"></div>
18
+ </tr>
19
+ </thead>
20
+ <tbody>
21
+ <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
22
+ <EmptyContainer>
23
+ {{ emptyText }}
24
+ </EmptyContainer>
25
+ </EmptyTd>
26
+ <TableRow v-for="(row, index) in tableItems" v-else :key="index">
27
+ <TableItem v-for="(item, idx) in row" :key="idx">
28
+ {{ item.value }}
29
+ </TableItem>
30
+ <IconsContainer v-if="showIconsContainer">
31
+ <DeleteIcon
32
+ color="gray"
33
+ @click="$emit('on-click-delete', index)"
34
+ />
35
+ </IconsContainer>
36
+ </TableRow>
37
+ </tbody>
38
+ </TableContainer>
39
+ </TableWrapper>
40
+ </TableScroll>
41
+ </PageWrapper>
42
+ </template>
43
+
44
+ <script>
45
+ // This is a read only table. Pass it data, and it displays it
46
+ // ToDo: add this to storybook
47
+ // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
48
+ import styled from 'vue3-styled-components'
49
+ import DeleteIcon from '../../deleteIcon'
50
+ import Spinner from '../../spinner'
51
+
52
+ const TableScroll = styled.div`
53
+ position: relative;
54
+ max-width: 100%;
55
+ `
56
+
57
+ const wrapperAttrs = { fullWidth: Boolean }
58
+ const TableWrapper = styled('div', wrapperAttrs)`
59
+ width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
60
+ max-width: 100%;
61
+ overflow: auto;
62
+
63
+ ::-webkit-scrollbar {
64
+ width: 10px; //width of the whole scrollbar area
65
+ }
66
+
67
+ track ::-webkit-scrollbar-track {
68
+ background: #fff;
69
+ }
70
+
71
+ ::-webkit-scrollbar-thumb {
72
+ border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
73
+ }
74
+ `
75
+
76
+ const TableContainer = styled.table`
77
+ width: 100%;
78
+ border-collapse: collapse;
79
+ border: none;
80
+ `
81
+
82
+ const TableItem = styled.td`
83
+ border: 1px solid ${(props) => props.theme.colors.grey3};
84
+ width: auto;
85
+ white-space: nowrap;
86
+ padding: 12px;
87
+ text-align: right;
88
+ `
89
+
90
+ const TableHeader = styled(TableItem)`
91
+ background-color: #e6e8ee;
92
+ font-weight: 700;
93
+ text-align: left;
94
+ `
95
+
96
+ const TableRow = styled.tr`
97
+ &:hover {
98
+ background-color: #f5f7fa;
99
+ cursor: pointer;
100
+ }
101
+ `
102
+
103
+ const TitleText = styled.div`
104
+ font-weight: 700;
105
+ margin-bottom: 6px;
106
+ `
107
+
108
+ const PageWrapper = styled.div`
109
+ margin: 16px 0;
110
+ font-size: 13px;
111
+ `
112
+
113
+ const IconsContainer = styled.div`
114
+ width: 100%;
115
+ display: inline-flex;
116
+ flex-wrap: nowrap;
117
+ background-color: #fff;
118
+
119
+ &:hover {
120
+ background-color: #fff;
121
+ }
122
+ `
123
+
124
+ const SpinnerWrapper = styled.div`
125
+ border: 1px solid ${(props) => props.theme.colors.grey3};
126
+ height: 150px;
127
+ display: grid;
128
+ align-items: center;
129
+ justify-items: center;
130
+ `
131
+
132
+ const EmptyContainer = styled.div`
133
+ display: grid;
134
+ align-items: center;
135
+ justify-items: center;
136
+ height: 100px;
137
+ `
138
+
139
+ const EmptyTd = styled.td`
140
+ border: 1px solid ${(props) => props.theme.colors.grey3};
141
+ `
142
+
143
+ export default {
144
+ name: 'ViewTable',
145
+ components: {
146
+ TableScroll,
147
+ TableWrapper,
148
+ TableContainer,
149
+ TableHeader,
150
+ TableItem,
151
+ TableRow,
152
+ TitleText,
153
+ PageWrapper,
154
+ DeleteIcon,
155
+ IconsContainer,
156
+ Spinner,
157
+ SpinnerWrapper,
158
+ EmptyContainer,
159
+ EmptyTd,
160
+ },
161
+ props: {
162
+ headerItems: {
163
+ required: true,
164
+ },
165
+ tableItems: {
166
+ required: true,
167
+ },
168
+ fullWidth: {
169
+ required: false,
170
+ default: true,
171
+ },
172
+ tableTitle: {
173
+ required: false,
174
+ default: null,
175
+ },
176
+ showDeleteButton: {
177
+ required: false,
178
+ default: false,
179
+ },
180
+ isLoading: {
181
+ required: false,
182
+ default: false,
183
+ },
184
+ emptyText: {
185
+ required: false,
186
+ default: 'There are no items',
187
+ },
188
+ },
189
+ computed: {
190
+ showIconsContainer() {
191
+ return this.showDeleteButton
192
+ },
193
+ },
194
+ }
195
+ </script>
@@ -1,83 +1,83 @@
1
- <template>
2
- <PageContainer>
3
- <TabsContainer>
4
- <TabItem
5
- v-for="item in tabsData"
6
- :key="item.id"
7
- :is-active="activeTab === item.id"
8
- @click="onTabClick({ id: item.id })"
9
- >
10
- {{ item.text }}
11
- </TabItem>
12
- </TabsContainer>
13
- </PageContainer>
14
- </template>
15
-
16
- <script>
17
- // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
18
- // To use:
19
- // <RCTabsHeader
20
- // :activeTab="activeTabIndex" // should match the 'id'
21
- // :tabsData="[
22
- // {
23
- // text: 'Tab 1',
24
- // id: 0
25
- // },
26
- // {
27
- // text: 'Tab 1',
28
- // id: 1
29
- // }
30
- // ]"
31
- // />
32
- import styled from 'vue3-styled-components'
33
-
34
- const PageContainer = styled.div``
35
-
36
- const TabsContainer = styled.div`
37
- display: flex;
38
- cursor: pointer;
39
- width: 100%;
40
- `
41
-
42
- const TabAttrs = { isActive: Boolean }
43
- const TabItem = styled('div', TabAttrs)`
44
- padding: 10px 20px;
45
- font-size: 14px;
46
- font-weight: 700;
47
- background-color: ${(props) =>
48
- props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
49
- border-top: 3px solid
50
- ${(props) =>
51
- props.isActive
52
- ? props.theme.colors.brightBlue
53
- : props.theme.colors.grey4};
54
- flex-grow: 1;
55
- `
56
-
57
- export default {
58
- name: 'RCTabsHeader',
59
- components: {
60
- PageContainer,
61
- TabsContainer,
62
- TabItem
63
- },
64
- props: {
65
- tabsData: {
66
- required: true,
67
- type: Array
68
- },
69
- activeTab: {
70
- required: true,
71
- type: Number
72
- }
73
- },
74
- methods: {
75
- onTabClick({ id }) {
76
- if (id === this.activeTab) {
77
- return
78
- }
79
- this.$emit('on-tab-change', id)
80
- }
81
- }
82
- }
83
- </script>
1
+ <template>
2
+ <PageContainer>
3
+ <TabsContainer>
4
+ <TabItem
5
+ v-for="item in tabsData"
6
+ :key="item.id"
7
+ :is-active="activeTab === item.id"
8
+ @click="onTabClick({ id: item.id })"
9
+ >
10
+ {{ item.text }}
11
+ </TabItem>
12
+ </TabsContainer>
13
+ </PageContainer>
14
+ </template>
15
+
16
+ <script>
17
+ // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
18
+ // To use:
19
+ // <RCTabsHeader
20
+ // :activeTab="activeTabIndex" // should match the 'id'
21
+ // :tabsData="[
22
+ // {
23
+ // text: 'Tab 1',
24
+ // id: 0
25
+ // },
26
+ // {
27
+ // text: 'Tab 1',
28
+ // id: 1
29
+ // }
30
+ // ]"
31
+ // />
32
+ import styled from 'vue3-styled-components'
33
+
34
+ const PageContainer = styled.div``
35
+
36
+ const TabsContainer = styled.div`
37
+ display: flex;
38
+ cursor: pointer;
39
+ width: 100%;
40
+ `
41
+
42
+ const TabAttrs = { isActive: Boolean }
43
+ const TabItem = styled('div', TabAttrs)`
44
+ padding: 10px 20px;
45
+ font-size: 14px;
46
+ font-weight: 700;
47
+ background-color: ${(props) =>
48
+ props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
49
+ border-top: 3px solid
50
+ ${(props) =>
51
+ props.isActive
52
+ ? props.theme.colors.brightBlue
53
+ : props.theme.colors.grey4};
54
+ flex-grow: 1;
55
+ `
56
+
57
+ export default {
58
+ name: 'RCTabsHeader',
59
+ components: {
60
+ PageContainer,
61
+ TabsContainer,
62
+ TabItem
63
+ },
64
+ props: {
65
+ tabsData: {
66
+ required: true,
67
+ type: Array
68
+ },
69
+ activeTab: {
70
+ required: true,
71
+ type: Number
72
+ }
73
+ },
74
+ methods: {
75
+ onTabClick({ id }) {
76
+ if (id === this.activeTab) {
77
+ return
78
+ }
79
+ this.$emit('on-tab-change', id)
80
+ }
81
+ }
82
+ }
83
+ </script>