@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-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 (83) hide show
  1. package/.prettierrc +6 -8
  2. package/package.json +21 -9
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +78 -79
  6. package/src/assets/svgIcons/adjust_roof.svg +6 -0
  7. package/src/assets/svgIcons/copy.svg +10 -0
  8. package/src/assets/theme.js +3 -3
  9. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  10. package/src/components/addNewButton/index.vue +51 -48
  11. package/src/components/banner/actionBanner/index.vue +55 -54
  12. package/src/components/banner/banner/banner.stories.js +5 -5
  13. package/src/components/banner/banner/index.vue +159 -159
  14. package/src/components/banner/infoBanner/index.vue +53 -41
  15. package/src/components/buttons/buttonIcon/index.vue +122 -125
  16. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  17. package/src/components/buttons/closeButton/index.vue +49 -49
  18. package/src/components/buttons/mainButton/index.vue +119 -119
  19. package/src/components/card/index.vue +70 -70
  20. package/src/components/collapsableInfoText/index.vue +94 -96
  21. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  22. package/src/components/deleteIcon/index.vue +54 -54
  23. package/src/components/draggableInputHandle/index.vue +37 -37
  24. package/src/components/dropdown/Dropdown.stories.js +10 -9
  25. package/src/components/dropdown/index.vue +106 -106
  26. package/src/components/errorMessage/index.vue +52 -52
  27. package/src/components/filter/filterSettings.vue +433 -439
  28. package/src/components/filter/index.vue +135 -135
  29. package/src/components/filter/parentDropdown.vue +73 -73
  30. package/src/components/icon/Icons.stories.js +7 -7
  31. package/src/components/icon/iconCollection.vue +53 -53
  32. package/src/components/icon/index.vue +121 -121
  33. package/src/components/iconWrapper/index.vue +156 -156
  34. package/src/components/infoCard/index.vue +26 -26
  35. package/src/components/infoText/index.vue +132 -133
  36. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  37. package/src/components/inputs/checkbox/index.vue +180 -190
  38. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  39. package/src/components/inputs/inputNumber/index.vue +644 -647
  40. package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
  41. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  42. package/src/components/inputs/inputText/index.vue +336 -337
  43. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  44. package/src/components/inputs/radioButton/index.vue +219 -221
  45. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  46. package/src/components/inputs/searchInput/index.vue +126 -126
  47. package/src/components/inputs/select/index.vue +776 -778
  48. package/src/components/inputs/select/option/index.vue +124 -124
  49. package/src/components/inputs/select/select.stories.js +32 -31
  50. package/src/components/inputs/slider/index.vue +99 -99
  51. package/src/components/inputs/switchField/index.vue +222 -220
  52. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  53. package/src/components/inputs/textAreaInput/index.vue +173 -171
  54. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  55. package/src/components/inputs/toggle/index.vue +217 -214
  56. package/src/components/label/index.vue +82 -82
  57. package/src/components/markerItem/index.vue +66 -68
  58. package/src/components/modals/actionModal/index.vue +54 -54
  59. package/src/components/modals/infoModal/index.vue +36 -39
  60. package/src/components/modals/modal/index.vue +134 -134
  61. package/src/components/modals/modal/modal.stories.js +5 -5
  62. package/src/components/navigationTabs/index.vue +94 -96
  63. package/src/components/pageSubtitle/index.vue +49 -55
  64. package/src/components/pageTitle/index.vue +56 -56
  65. package/src/components/pagination/index.vue +89 -92
  66. package/src/components/progressBar/index.vue +107 -107
  67. package/src/components/projectMarker/index.vue +244 -246
  68. package/src/components/rangeSlider/Slider.vue +465 -491
  69. package/src/components/rangeSlider/index.vue +410 -410
  70. package/src/components/rangeSlider/utils/dom.js +5 -5
  71. package/src/components/selectedOptions/index.vue +119 -119
  72. package/src/components/sideMenu/index.vue +199 -199
  73. package/src/components/spinner/index.vue +57 -57
  74. package/src/components/tableDropdown/index.vue +520 -520
  75. package/src/components/tables/mainTable/index.vue +362 -366
  76. package/src/components/tables/viewTable/index.vue +171 -171
  77. package/src/components/threeDots/index.vue +334 -340
  78. package/src/components/videoThumbnail/index.vue +86 -86
  79. package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
  80. package/src/helpers/numberConverter.js +2 -2
  81. package/src/helpers/translateLang.js +9 -9
  82. package/src/mixins/inputValidations.js +5 -5
  83. package/.eslintrc.js +0 -184
@@ -1,195 +1,195 @@
1
1
  <template>
2
- <PageWrapper>
3
- <TitleText>
2
+ <page-wrapper>
3
+ <title-text>
4
4
  {{ tableTitle }}
5
- </TitleText>
6
- <TableScroll>
7
- <TableWrapper :full-width="fullWidth">
8
- <SpinnerWrapper v-if="isLoading">
9
- <Spinner />
10
- </SpinnerWrapper>
11
- <TableContainer v-else>
5
+ </title-text>
6
+ <table-scroll>
7
+ <table-wrapper :fullWidth="fullWidth">
8
+ <spinner-wrapper v-if="isLoading">
9
+ <spinner />
10
+ </spinner-wrapper>
11
+ <table-container v-else>
12
12
  <thead>
13
13
  <tr>
14
- <TableHeader v-for="(item, index) in headerItems" :key="index">
14
+ <table-header v-for="(item, index) in headerItems" :key="index">
15
15
  {{ item.value }}
16
- </TableHeader>
17
- <div v-if="showIconsContainer && tableItems.length"></div>
16
+ </table-header>
17
+ <div v-if="showIconsContainer && tableItems.length" />
18
18
  </tr>
19
19
  </thead>
20
20
  <tbody>
21
- <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
22
- <EmptyContainer>
21
+ <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
22
+ <empty-container>
23
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">
24
+ </empty-container>
25
+ </empty-td>
26
+ <table-row v-for="(row, index) in tableItems" :key="index" v-else>
27
+ <table-item v-for="(item, idx) in row" :key="idx">
28
28
  {{ item.value }}
29
- </TableItem>
30
- <IconsContainer v-if="showIconsContainer">
31
- <DeleteIcon
32
- color="gray"
29
+ </table-item>
30
+ <icons-container v-if="showIconsContainer">
31
+ <delete-icon
33
32
  @click="$emit('on-click-delete', index)"
33
+ color="gray"
34
34
  />
35
- </IconsContainer>
36
- </TableRow>
35
+ </icons-container>
36
+ </table-row>
37
37
  </tbody>
38
- </TableContainer>
39
- </TableWrapper>
40
- </TableScroll>
41
- </PageWrapper>
38
+ </table-container>
39
+ </table-wrapper>
40
+ </table-scroll>
41
+ </page-wrapper>
42
42
  </template>
43
43
 
44
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
- }
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
66
 
67
- track ::-webkit-scrollbar-track {
68
- background: #fff;
69
- }
67
+ track ::-webkit-scrollbar-track {
68
+ background: #fff;
69
+ }
70
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;
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
+ `
118
102
 
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,
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: 'view-table',
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
160
164
  },
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
- },
165
+ tableItems: {
166
+ required: true
188
167
  },
189
- computed: {
190
- showIconsContainer() {
191
- return this.showDeleteButton
192
- },
168
+ fullWidth: {
169
+ required: false,
170
+ default: true
193
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
+ }
194
193
  }
194
+ }
195
195
  </script>