@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

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 (280) hide show
  1. package/.prettierrc +6 -6
  2. package/.storybook/main.js +8 -8
  3. package/.storybook/preview.js +46 -46
  4. package/README.md +29 -29
  5. package/babel.config.js +4 -4
  6. package/package.json +66 -66
  7. package/postcss.config.js +6 -6
  8. package/public/index.html +17 -17
  9. package/src/App.vue +250 -250
  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/bold.svg +3 -3
  51. package/src/assets/svgIcons/bom.svg +3 -3
  52. package/src/assets/svgIcons/bom_generation.svg +10 -10
  53. package/src/assets/svgIcons/bookmaker.svg +3 -3
  54. package/src/assets/svgIcons/bubble.svg +3 -3
  55. package/src/assets/svgIcons/bug.svg +5 -5
  56. package/src/assets/svgIcons/bullet_list.svg +8 -8
  57. package/src/assets/svgIcons/calendar.svg +7 -7
  58. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  59. package/src/assets/svgIcons/call.svg +3 -3
  60. package/src/assets/svgIcons/camera.svg +3 -3
  61. package/src/assets/svgIcons/car.svg +3 -3
  62. package/src/assets/svgIcons/cart.svg +3 -3
  63. package/src/assets/svgIcons/checkbox.svg +3 -3
  64. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  65. package/src/assets/svgIcons/clickable_info.svg +4 -4
  66. package/src/assets/svgIcons/clip.svg +3 -3
  67. package/src/assets/svgIcons/clock.svg +17 -17
  68. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  69. package/src/assets/svgIcons/co_branding.svg +5 -5
  70. package/src/assets/svgIcons/collapse.svg +4 -4
  71. package/src/assets/svgIcons/collections.svg +3 -3
  72. package/src/assets/svgIcons/component_library.svg +7 -7
  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/deadline.svg +4 -4
  81. package/src/assets/svgIcons/deal_flow.svg +5 -5
  82. package/src/assets/svgIcons/delete.svg +4 -4
  83. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  84. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  85. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  86. package/src/assets/svgIcons/direction_active.svg +5 -5
  87. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  88. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  89. package/src/assets/svgIcons/dislike.svg +3 -3
  90. package/src/assets/svgIcons/distance_tool.svg +8 -8
  91. package/src/assets/svgIcons/distances_active.svg +9 -9
  92. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  93. package/src/assets/svgIcons/distort_tool.svg +10 -10
  94. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  95. package/src/assets/svgIcons/document.svg +3 -3
  96. package/src/assets/svgIcons/documents.svg +4 -4
  97. package/src/assets/svgIcons/downarrow.svg +3 -3
  98. package/src/assets/svgIcons/download.svg +4 -4
  99. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  100. package/src/assets/svgIcons/draw_tool.svg +3 -3
  101. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  102. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  103. package/src/assets/svgIcons/duplicate.svg +4 -4
  104. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  105. package/src/assets/svgIcons/e_signature.svg +5 -5
  106. package/src/assets/svgIcons/edit_button.svg +3 -3
  107. package/src/assets/svgIcons/email.svg +3 -3
  108. package/src/assets/svgIcons/ems-1.svg +3 -3
  109. package/src/assets/svgIcons/ems.svg +3 -3
  110. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  111. package/src/assets/svgIcons/erase.svg +4 -4
  112. package/src/assets/svgIcons/external_icon.svg +5 -5
  113. package/src/assets/svgIcons/fav_icon.svg +4 -4
  114. package/src/assets/svgIcons/finance.svg +3 -3
  115. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  116. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  117. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  118. package/src/assets/svgIcons/finish-1.svg +4 -4
  119. package/src/assets/svgIcons/finish.svg +3 -3
  120. package/src/assets/svgIcons/flatten.svg +11 -11
  121. package/src/assets/svgIcons/folder.svg +3 -3
  122. package/src/assets/svgIcons/free_technology.svg +5 -5
  123. package/src/assets/svgIcons/heat_calc.svg +7 -7
  124. package/src/assets/svgIcons/house.svg +3 -3
  125. package/src/assets/svgIcons/info.svg +3 -3
  126. package/src/assets/svgIcons/initial_situation.svg +3 -3
  127. package/src/assets/svgIcons/integrations.svg +3 -3
  128. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  129. package/src/assets/svgIcons/intro-tour.svg +3 -3
  130. package/src/assets/svgIcons/inverter-1.svg +5 -5
  131. package/src/assets/svgIcons/inverter.svg +3 -3
  132. package/src/assets/svgIcons/italic.svg +3 -3
  133. package/src/assets/svgIcons/key.svg +3 -3
  134. package/src/assets/svgIcons/layers_close.svg +4 -4
  135. package/src/assets/svgIcons/layers_open.svg +4 -4
  136. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  137. package/src/assets/svgIcons/lead_provider.svg +4 -4
  138. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  139. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  140. package/src/assets/svgIcons/light_bulb.svg +3 -3
  141. package/src/assets/svgIcons/like.svg +3 -3
  142. package/src/assets/svgIcons/line_graph.svg +3 -3
  143. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  144. package/src/assets/svgIcons/location.svg +3 -3
  145. package/src/assets/svgIcons/lock.svg +3 -3
  146. package/src/assets/svgIcons/loop.svg +3 -3
  147. package/src/assets/svgIcons/lunch.svg +4 -4
  148. package/src/assets/svgIcons/magic_tool.svg +6 -6
  149. package/src/assets/svgIcons/map_icon.svg +5 -5
  150. package/src/assets/svgIcons/map_settings.svg +3 -3
  151. package/src/assets/svgIcons/margin_tool.svg +4 -4
  152. package/src/assets/svgIcons/meeting.svg +6 -6
  153. package/src/assets/svgIcons/move_copy.svg +4 -4
  154. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  155. package/src/assets/svgIcons/next.svg +4 -4
  156. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  157. package/src/assets/svgIcons/numbered_list.svg +6 -6
  158. package/src/assets/svgIcons/obstacle_tool.svg +9 -9
  159. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  160. package/src/assets/svgIcons/offset_tool.svg +8 -8
  161. package/src/assets/svgIcons/outline_tool.svg +11 -11
  162. package/src/assets/svgIcons/pan_tool.svg +12 -12
  163. package/src/assets/svgIcons/panels_tool.svg +8 -8
  164. package/src/assets/svgIcons/pen_tool.svg +4 -4
  165. package/src/assets/svgIcons/picker_tool.svg +4 -4
  166. package/src/assets/svgIcons/picture.svg +3 -3
  167. package/src/assets/svgIcons/pin.svg +5 -5
  168. package/src/assets/svgIcons/presentation.svg +3 -3
  169. package/src/assets/svgIcons/previous.svg +4 -4
  170. package/src/assets/svgIcons/profile-1.svg +4 -4
  171. package/src/assets/svgIcons/profile.svg +4 -4
  172. package/src/assets/svgIcons/profitability.svg +3 -3
  173. package/src/assets/svgIcons/project_analysis.svg +4 -4
  174. package/src/assets/svgIcons/project_settings.svg +4 -4
  175. package/src/assets/svgIcons/pv.svg +3 -3
  176. package/src/assets/svgIcons/quotations.svg +6 -6
  177. package/src/assets/svgIcons/redo.svg +6 -6
  178. package/src/assets/svgIcons/resizer.svg +5 -5
  179. package/src/assets/svgIcons/roof_layer.svg +3 -3
  180. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  181. package/src/assets/svgIcons/rotate_view.svg +5 -5
  182. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  183. package/src/assets/svgIcons/run_simulation.svg +3 -3
  184. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  185. package/src/assets/svgIcons/search.svg +3 -3
  186. package/src/assets/svgIcons/security.svg +3 -3
  187. package/src/assets/svgIcons/settings.svg +3 -3
  188. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  189. package/src/assets/svgIcons/smartphone.svg +4 -4
  190. package/src/assets/svgIcons/solar_calc.svg +13 -13
  191. package/src/assets/svgIcons/sorting.svg +4 -4
  192. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  193. package/src/assets/svgIcons/strikethrough.svg +4 -4
  194. package/src/assets/svgIcons/subscriptions.svg +3 -3
  195. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  196. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  197. package/src/assets/svgIcons/subsidies.svg +3 -3
  198. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  199. package/src/assets/svgIcons/suitcase.svg +3 -3
  200. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  201. package/src/assets/svgIcons/transfer.svg +4 -4
  202. package/src/assets/svgIcons/trim_tool.svg +4 -4
  203. package/src/assets/svgIcons/truck.svg +3 -3
  204. package/src/assets/svgIcons/underlined.svg +3 -3
  205. package/src/assets/svgIcons/undo.svg +6 -6
  206. package/src/assets/svgIcons/uparrow.svg +3 -3
  207. package/src/assets/svgIcons/update.svg +3 -3
  208. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  209. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  210. package/src/assets/svgIcons/upload_image.svg +8 -8
  211. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  212. package/src/assets/svgIcons/variants.svg +6 -6
  213. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  214. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  215. package/src/assets/svgIcons/warning.svg +4 -4
  216. package/src/assets/svgIcons/way.svg +5 -5
  217. package/src/assets/svgIcons/wifi.svg +3 -3
  218. package/src/assets/svgIcons/winter.svg +3 -3
  219. package/src/assets/svgIcons/workflow_template.svg +11 -11
  220. package/src/assets/theme.js +38 -38
  221. package/src/components/addNewButton/AddNewButton.stories.js +24 -24
  222. package/src/components/addNewButton/index.vue +62 -62
  223. package/src/components/buttons/buttonIcon/index.vue +142 -142
  224. package/src/components/buttons/closeButton/CloseButton.stories.js +29 -29
  225. package/src/components/buttons/closeButton/index.vue +61 -61
  226. package/src/components/buttons/mainButton/index.vue +107 -107
  227. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  228. package/src/components/deleteIcon/index.vue +61 -61
  229. package/src/components/dropdown/Dropdown.stories.js +54 -54
  230. package/src/components/dropdown/index.vue +118 -118
  231. package/src/components/errorMessage/index.vue +61 -61
  232. package/src/components/filter/filterSettings.vue +650 -650
  233. package/src/components/filter/index.vue +143 -132
  234. package/src/components/filter/parentDropdown.vue +91 -91
  235. package/src/components/icon/Icons.stories.js +41 -41
  236. package/src/components/icon/iconCollection.vue +68 -68
  237. package/src/components/icon/index.vue +116 -116
  238. package/src/components/iconWrapper/index.vue +156 -156
  239. package/src/components/infoCard/index.vue +37 -37
  240. package/src/components/infoText/index.vue +170 -170
  241. package/src/components/inputs/checkbox/Checkbox.stories.js +57 -57
  242. package/src/components/inputs/checkbox/index.vue +187 -187
  243. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  244. package/src/components/inputs/inputNumber/index.vue +710 -710
  245. package/src/components/inputs/inputNumberQuestion/index.vue +215 -215
  246. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  247. package/src/components/inputs/inputText/index.vue +355 -355
  248. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  249. package/src/components/inputs/radioButton/index.vue +267 -267
  250. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  251. package/src/components/inputs/searchInput/index.vue +133 -133
  252. package/src/components/inputs/select/index.vue +596 -596
  253. package/src/components/inputs/select/option/index.vue +111 -111
  254. package/src/components/inputs/select/select.stories.js +59 -59
  255. package/src/components/inputs/slider/index.vue +126 -126
  256. package/src/components/inputs/switchField/index.vue +265 -265
  257. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +135 -135
  258. package/src/components/inputs/textAreaInput/index.vue +206 -206
  259. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  260. package/src/components/inputs/toggle/index.vue +298 -298
  261. package/src/components/modals/modal/index.vue +159 -159
  262. package/src/components/modals/modal/modal.stories.js +31 -31
  263. package/src/components/navigationTabs/index.vue +107 -107
  264. package/src/components/pageSubtitle/index.vue +68 -68
  265. package/src/components/pageTitle/index.vue +68 -68
  266. package/src/components/pagination/index.vue +129 -129
  267. package/src/components/progressBar/index.vue +125 -125
  268. package/src/components/projectMarker/index.vue +291 -291
  269. package/src/components/sideMenu/index.vue +270 -270
  270. package/src/components/spinner/index.vue +71 -71
  271. package/src/components/tableDropdown/index.vue +637 -637
  272. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  273. package/src/components/tables/mainTable/index.vue +446 -446
  274. package/src/components/tables/viewTable/index.vue +195 -195
  275. package/src/components/threeDots/index.vue +384 -384
  276. package/src/components/videoThumbnail/index.vue +107 -107
  277. package/src/components/videoThumbnail/videoThumbnail.stories.js +35 -35
  278. package/src/helpers/numberConverter.js +102 -102
  279. package/src/helpers/translateLang.js +119 -119
  280. package/src/main.js +13 -13
package/src/App.vue CHANGED
@@ -1,250 +1,250 @@
1
- <template>
2
- <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
- <page-container>
4
-
5
- <br/>
6
- <input-number
7
- :value="value"
8
- :minNumber="0"
9
- unitName="mm"
10
- :numberPrecision="0"
11
- backgroundColor="transparent"
12
- borderColor="eturnityGrey"
13
- inputHeight="34px"
14
- inputWidth="420px"
15
- textAlign="left"
16
- :isInteractive="true"
17
- :interactionStep="1"
18
- @on-input="value = $event"
19
- @input-change="changeHandler"
20
- @input-focus="focusHandler"
21
- @input-blur="blurHandler"
22
- >
23
- <template v-slot:label>
24
- <div>Interactive Label</div>
25
- </template>
26
- </input-number>
27
-
28
- <dropdown-component openingMode="hover" gap="30px">
29
- <template #trigger><i>Click Me</i></template>
30
- <template #dropdown>
31
- <div>
32
- <a href="">test1</a>
33
- <button href="">test2</button>
34
- <br>
35
- <p>Text</p>
36
- </div>
37
- </template>
38
- </dropdown-component>
39
-
40
- <videoThumbnail
41
- src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
42
- playIconColor="red"
43
- playIconSize="20px"
44
- width="400px"
45
- height="600px"
46
- />
47
-
48
- <SwitchField
49
- @on-switch-change="onInputChange($event)"
50
- :options="[
51
- { value: 0, content: 'zero' },
52
- { value: 1, content: 'one' },
53
- { value: 2, content: 'two' }
54
- ]"
55
- :value="value"
56
- label="label"
57
- toggleColor="red"
58
- size="large"
59
- backgroundColor="blue"
60
- labelAlign="left"
61
- fontColor="black"
62
- :disabled="false"
63
- />
64
- <icon
65
- name="opacity"
66
- color="red"
67
- hoveredColor="blue"
68
- size="60px"
69
- cursor="default"
70
- isStriked="true"
71
- />
72
- <Select
73
- :value="value"
74
- selectWidth="100%"
75
- optionWidth="50%"
76
- label="that is a label"
77
- alignItems="vertical"
78
- colorMode="dark"
79
- isSearchable="true"
80
- @input-change="value = $event"
81
- @search-change="searchValue = $event"
82
- >
83
- <template #selector="{ selectedValue }">
84
- value selected: {{ selectedValue }}
85
- </template>
86
- <template #dropdown>
87
- <Option
88
- v-for="opt in filteredOptionList"
89
- :key="opt.id"
90
- :value="opt.val"
91
- >{{ opt.lookFor }}
92
- </Option
93
- >
94
- </template>
95
- </Select>
96
-
97
-
98
- {{ filteredOptionList }}
99
-
100
- <iconCollection color="red"/>
101
- </page-container>
102
- </ThemeProvider>
103
- </template>
104
-
105
- <script>
106
- import {ThemeProvider} from 'vue-styled-components'
107
- import theme from './assets/theme'
108
- import styled from 'vue-styled-components'
109
- import InputNumber from '@/components/inputs/inputNumber'
110
- import Select from '@/components/inputs/select'
111
- import SwitchField from '@/components/inputs/switchField'
112
- import Option from '@/components/inputs/select/option'
113
- import iconCollection from '@/components/icon/iconCollection'
114
- import dropdownComponent from '@/components/dropdown'
115
- import videoThumbnail from '@/components/videoThumbnail'
116
- import icon from '@/components/icon'
117
- import infoCard from '@/components/infoCard'
118
- // import TableDropdown from "@/components/tableDropdown"
119
-
120
- const PageContainer = styled.div`
121
- padding: 40px;
122
- `
123
-
124
- // const RowContainer = styled.div`
125
- // display: inline-flex;
126
- // gap: 10px;
127
- // flex-wrap: wrap;
128
- // `
129
-
130
- export default {
131
- name: 'App',
132
- components: {
133
- ThemeProvider,
134
- PageContainer,
135
- InputNumber,
136
- Option,
137
- Select,
138
- SwitchField,
139
- iconCollection,
140
- dropdownComponent,
141
- videoThumbnail,
142
- icon,
143
- infoCard
144
- },
145
- data() {
146
- return {
147
- value: 42,
148
- value2: 42,
149
- companyName: 'toto',
150
- optionList: [
151
- {id: 'a', val: 'A', lookFor: 'babababa'},
152
- {id: 'b', val: 'B', lookFor: 'abab'},
153
- {id: 'c', val: 'C', lookFor: 'ccc'},
154
- {id: 'd', val: 'D', lookFor: 'ddd'},
155
- {id: 'e', val: 'E', lookFor: 'dddee'},
156
- {id: 'f', val: 'F', lookFor: 'ddfff'},
157
- {id: 'g', val: 'G', lookFor: 'dggg'},
158
- {id: 'h', val: 'H', lookFor: 'dddhhh'},
159
- ],
160
- searchValue: ''
161
- }
162
- },
163
- computed: {
164
- filteredOptionList() {
165
- return this.optionList.filter((opt) =>
166
- opt.lookFor.includes(this.searchValue)
167
- )
168
- }
169
- },
170
- methods: {
171
- blurHandler(e) {
172
- console.log('blur', e)
173
- },
174
- changeHandler(e) {
175
- console.log('change', e)
176
- },
177
- focusHandler(e) {
178
- console.log('focus', e)
179
- },
180
- inputHandler(e) {
181
- this.value2 = e
182
- console.log('input', e)
183
- },
184
- keydownHandler(e) {
185
- console.log('test', e)
186
- },
187
- getTheme() {
188
- return theme
189
- },
190
- onInputChange(event) {
191
- this.inputValue = event
192
- },
193
- onInputBlur(event) {
194
- console.log(event)
195
- },
196
- isDropdownOpen() {
197
- return this.dropdownOpen
198
- },
199
- onClickButton() {
200
- console.log('Test')
201
- },
202
- toggleDropdownOpen() {
203
- this.dropdownOpen = !this.dropdownOpen
204
- },
205
- getDropdownValues() {
206
- let items = []
207
- items = [
208
- {
209
- value: this.getComponentInfo({
210
- row: this.itemOptions[0],
211
- value: 'display_name'
212
- })
213
- },
214
- {
215
- value: this.getComponentInfo({
216
- row: this.itemOptions[0],
217
- value: 'company_item_number'
218
- })
219
- },
220
- {
221
- value: this.getComponentInfo({
222
- row: this.itemOptions[0],
223
- value: 'model'
224
- })
225
- }
226
- ]
227
- return items
228
- },
229
- getComponentInfo({row, value}) {
230
- let item
231
- if (row.selectedValue && row.selectedValue[value]) {
232
- item = row.selectedValue[value]
233
- } else if (row[value]) {
234
- item = row[value]
235
- } else {
236
- item = '-'
237
- }
238
- return item
239
- }
240
- }
241
- }
242
- </script>
243
-
244
- <style>
245
- html,
246
- body {
247
- height: 100%;
248
- margin: 0;
249
- }
250
- </style>
1
+ <template>
2
+ <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
+ <page-container>
4
+
5
+ <br/>
6
+ <input-number
7
+ :value="value"
8
+ :minNumber="0"
9
+ unitName="mm"
10
+ :numberPrecision="0"
11
+ backgroundColor="transparent"
12
+ borderColor="eturnityGrey"
13
+ inputHeight="34px"
14
+ inputWidth="420px"
15
+ textAlign="left"
16
+ :isInteractive="true"
17
+ :interactionStep="1"
18
+ @on-input="value = $event"
19
+ @input-change="changeHandler"
20
+ @input-focus="focusHandler"
21
+ @input-blur="blurHandler"
22
+ >
23
+ <template v-slot:label>
24
+ <div>Interactive Label</div>
25
+ </template>
26
+ </input-number>
27
+
28
+ <dropdown-component openingMode="hover" gap="30px">
29
+ <template #trigger><i>Click Me</i></template>
30
+ <template #dropdown>
31
+ <div>
32
+ <a href="">test1</a>
33
+ <button href="">test2</button>
34
+ <br>
35
+ <p>Text</p>
36
+ </div>
37
+ </template>
38
+ </dropdown-component>
39
+
40
+ <videoThumbnail
41
+ src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
42
+ playIconColor="red"
43
+ playIconSize="20px"
44
+ width="400px"
45
+ height="600px"
46
+ />
47
+
48
+ <SwitchField
49
+ @on-switch-change="onInputChange($event)"
50
+ :options="[
51
+ { value: 0, content: 'zero' },
52
+ { value: 1, content: 'one' },
53
+ { value: 2, content: 'two' }
54
+ ]"
55
+ :value="value"
56
+ label="label"
57
+ toggleColor="red"
58
+ size="large"
59
+ backgroundColor="blue"
60
+ labelAlign="left"
61
+ fontColor="black"
62
+ :disabled="false"
63
+ />
64
+ <icon
65
+ name="opacity"
66
+ color="red"
67
+ hoveredColor="blue"
68
+ size="60px"
69
+ cursor="default"
70
+ isStriked="true"
71
+ />
72
+ <Select
73
+ :value="value"
74
+ selectWidth="100%"
75
+ optionWidth="50%"
76
+ label="that is a label"
77
+ alignItems="vertical"
78
+ colorMode="dark"
79
+ isSearchable="true"
80
+ @input-change="value = $event"
81
+ @search-change="searchValue = $event"
82
+ >
83
+ <template #selector="{ selectedValue }">
84
+ value selected: {{ selectedValue }}
85
+ </template>
86
+ <template #dropdown>
87
+ <Option
88
+ v-for="opt in filteredOptionList"
89
+ :key="opt.id"
90
+ :value="opt.val"
91
+ >{{ opt.lookFor }}
92
+ </Option
93
+ >
94
+ </template>
95
+ </Select>
96
+
97
+
98
+ {{ filteredOptionList }}
99
+
100
+ <iconCollection color="red"/>
101
+ </page-container>
102
+ </ThemeProvider>
103
+ </template>
104
+
105
+ <script>
106
+ import {ThemeProvider} from 'vue-styled-components'
107
+ import theme from './assets/theme'
108
+ import styled from 'vue-styled-components'
109
+ import InputNumber from '@/components/inputs/inputNumber'
110
+ import Select from '@/components/inputs/select'
111
+ import SwitchField from '@/components/inputs/switchField'
112
+ import Option from '@/components/inputs/select/option'
113
+ import iconCollection from '@/components/icon/iconCollection'
114
+ import dropdownComponent from '@/components/dropdown'
115
+ import videoThumbnail from '@/components/videoThumbnail'
116
+ import icon from '@/components/icon'
117
+ import infoCard from '@/components/infoCard'
118
+ // import TableDropdown from "@/components/tableDropdown"
119
+
120
+ const PageContainer = styled.div`
121
+ padding: 40px;
122
+ `
123
+
124
+ // const RowContainer = styled.div`
125
+ // display: inline-flex;
126
+ // gap: 10px;
127
+ // flex-wrap: wrap;
128
+ // `
129
+
130
+ export default {
131
+ name: 'App',
132
+ components: {
133
+ ThemeProvider,
134
+ PageContainer,
135
+ InputNumber,
136
+ Option,
137
+ Select,
138
+ SwitchField,
139
+ iconCollection,
140
+ dropdownComponent,
141
+ videoThumbnail,
142
+ icon,
143
+ infoCard
144
+ },
145
+ data() {
146
+ return {
147
+ value: 42,
148
+ value2: 42,
149
+ companyName: 'toto',
150
+ optionList: [
151
+ {id: 'a', val: 'A', lookFor: 'babababa'},
152
+ {id: 'b', val: 'B', lookFor: 'abab'},
153
+ {id: 'c', val: 'C', lookFor: 'ccc'},
154
+ {id: 'd', val: 'D', lookFor: 'ddd'},
155
+ {id: 'e', val: 'E', lookFor: 'dddee'},
156
+ {id: 'f', val: 'F', lookFor: 'ddfff'},
157
+ {id: 'g', val: 'G', lookFor: 'dggg'},
158
+ {id: 'h', val: 'H', lookFor: 'dddhhh'},
159
+ ],
160
+ searchValue: ''
161
+ }
162
+ },
163
+ computed: {
164
+ filteredOptionList() {
165
+ return this.optionList.filter((opt) =>
166
+ opt.lookFor.includes(this.searchValue)
167
+ )
168
+ }
169
+ },
170
+ methods: {
171
+ blurHandler(e) {
172
+ console.log('blur', e)
173
+ },
174
+ changeHandler(e) {
175
+ console.log('change', e)
176
+ },
177
+ focusHandler(e) {
178
+ console.log('focus', e)
179
+ },
180
+ inputHandler(e) {
181
+ this.value2 = e
182
+ console.log('input', e)
183
+ },
184
+ keydownHandler(e) {
185
+ console.log('test', e)
186
+ },
187
+ getTheme() {
188
+ return theme
189
+ },
190
+ onInputChange(event) {
191
+ this.inputValue = event
192
+ },
193
+ onInputBlur(event) {
194
+ console.log(event)
195
+ },
196
+ isDropdownOpen() {
197
+ return this.dropdownOpen
198
+ },
199
+ onClickButton() {
200
+ console.log('Test')
201
+ },
202
+ toggleDropdownOpen() {
203
+ this.dropdownOpen = !this.dropdownOpen
204
+ },
205
+ getDropdownValues() {
206
+ let items = []
207
+ items = [
208
+ {
209
+ value: this.getComponentInfo({
210
+ row: this.itemOptions[0],
211
+ value: 'display_name'
212
+ })
213
+ },
214
+ {
215
+ value: this.getComponentInfo({
216
+ row: this.itemOptions[0],
217
+ value: 'company_item_number'
218
+ })
219
+ },
220
+ {
221
+ value: this.getComponentInfo({
222
+ row: this.itemOptions[0],
223
+ value: 'model'
224
+ })
225
+ }
226
+ ]
227
+ return items
228
+ },
229
+ getComponentInfo({row, value}) {
230
+ let item
231
+ if (row.selectedValue && row.selectedValue[value]) {
232
+ item = row.selectedValue[value]
233
+ } else if (row[value]) {
234
+ item = row[value]
235
+ } else {
236
+ item = '-'
237
+ }
238
+ return item
239
+ }
240
+ }
241
+ }
242
+ </script>
243
+
244
+ <style>
245
+ html,
246
+ body {
247
+ height: 100%;
248
+ margin: 0;
249
+ }
250
+ </style>
@@ -1,3 +1,3 @@
1
- <svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
3
- </svg>
1
+ <svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
3
- </svg>
1
+ <svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
3
+ </svg>
@@ -1,36 +1,36 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
3
- <g transform="rotate(0 50 50)">
4
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
5
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
6
- </rect>
7
- </g><g transform="rotate(45 50 50)">
8
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
9
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
10
- </rect>
11
- </g><g transform="rotate(90 50 50)">
12
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
13
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
14
- </rect>
15
- </g><g transform="rotate(135 50 50)">
16
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
17
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
18
- </rect>
19
- </g><g transform="rotate(180 50 50)">
20
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
21
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
22
- </rect>
23
- </g><g transform="rotate(225 50 50)">
24
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
25
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
26
- </rect>
27
- </g><g transform="rotate(270 50 50)">
28
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
29
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
30
- </rect>
31
- </g><g transform="rotate(315 50 50)">
32
- <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
33
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
34
- </rect>
35
- </g>
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
3
+ <g transform="rotate(0 50 50)">
4
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
5
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
6
+ </rect>
7
+ </g><g transform="rotate(45 50 50)">
8
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
9
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
10
+ </rect>
11
+ </g><g transform="rotate(90 50 50)">
12
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
13
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
14
+ </rect>
15
+ </g><g transform="rotate(135 50 50)">
16
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
17
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
18
+ </rect>
19
+ </g><g transform="rotate(180 50 50)">
20
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
21
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
22
+ </rect>
23
+ </g><g transform="rotate(225 50 50)">
24
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
25
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
26
+ </rect>
27
+ </g><g transform="rotate(270 50 50)">
28
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
29
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
30
+ </rect>
31
+ </g><g transform="rotate(315 50 50)">
32
+ <rect x="48" y="20" rx="0" ry="0" width="4" height="14" fill="#000000">
33
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
34
+ </rect>
35
+ </g>
36
36
  <!-- [ldio] generated by https://loading.io/ --></svg>
@@ -1,11 +1,11 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
2
- <defs>
3
- <style>
4
- .cls-1 {
5
- fill: #ff5656;
6
- fill-rule: evenodd;
7
- }
8
- </style>
9
- </defs>
10
- <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
11
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
2
+ <defs>
3
+ <style>
4
+ .cls-1 {
5
+ fill: #ff5656;
6
+ fill-rule: evenodd;
7
+ }
8
+ </style>
9
+ </defs>
10
+ <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
11
+ </svg>
@@ -1,11 +1,11 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
2
- <defs>
3
- <style>
4
- .cls-1 {
5
- fill: #DEE2EB;
6
- fill-rule: evenodd;
7
- }
8
- </style>
9
- </defs>
10
- <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
11
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
2
+ <defs>
3
+ <style>
4
+ .cls-1 {
5
+ fill: #DEE2EB;
6
+ fill-rule: evenodd;
7
+ }
8
+ </style>
9
+ </defs>
10
+ <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
11
+ </svg>