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