@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,218 +1,215 @@
1
1
  <template>
2
- <Container>
3
- <InputWrapper>
4
- <InputContainer
5
- :has-length="!!textInput.length"
6
- :has-unit="!!question.unit_short_name"
7
- :input-width="inputWidth"
8
- :is-error="isError"
2
+ <container>
3
+ <input-wrapper>
4
+ <input-container
5
+ :hasUnit="!!question.unit_short_name"
9
6
  :placeholder="placeholder"
7
+ :isError="isError"
8
+ :inputWidth="inputWidth"
10
9
  :value="textInput"
11
- @blur="onInputBlur()"
10
+ :hasLength="!!textInput.length"
12
11
  @input="onChangeHandler"
12
+ @blur="onInputBlur()"
13
13
  @keyup.enter="$emit('on-enter-click')"
14
14
  />
15
- <UnitContainer
15
+ <unit-container
16
16
  v-if="question.unit_short_name"
17
- :has-length="!!textInput.length"
18
- :is-error="isError"
17
+ :hasLength="!!textInput.length"
18
+ :isError="isError"
19
+ >{{ question.unit_short_name }}</unit-container
19
20
  >
20
- {{ question.unit_short_name }}
21
- </UnitContainer>
22
- </InputWrapper>
23
- <ErrorMessage v-if="isError">
24
- {{ errorMessage }}
25
- </ErrorMessage>
26
- </Container>
21
+ </input-wrapper>
22
+ <error-message v-if="isError">{{ errorMessage }}</error-message>
23
+ </container>
27
24
  </template>
28
25
 
29
26
  <script>
30
- // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
31
- //This component should be used for questions with input fields only
32
- //How to use:
33
- // <input-number
34
- // placeholder="Enter distance"
35
- // :isError="false" //default is false
36
- // inputWidth="150px" //by default, this is 100%
37
- // :question="question"
38
- // :value="inputValue" //required -- String
39
- // @input-change="onInputChange($event)" //required
40
- // @on-enter-click="onInputSubmit()"
41
- // :errorMessage="Enter a number between 1 and 10"
42
- // />
43
- // question data example:
44
- // question: {
45
- // number_format_precision: 4,
46
- // number_min_allowed: 0,
47
- // number_max_allowed: 10,
48
- // unit_short_name: "cm",
49
- // },
50
- import styled from 'vue3-styled-components'
51
- import {
52
- stringToNumber,
53
- numberToString,
54
- } from '../../../helpers/numberConverter'
27
+ // import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
28
+ //This component should be used for questions with input fields only
29
+ //How to use:
30
+ // <input-number
31
+ // placeholder="Enter distance"
32
+ // :isError="false" //default is false
33
+ // inputWidth="150px" //by default, this is 100%
34
+ // :question="question"
35
+ // :value="inputValue" //required -- String
36
+ // @input-change="onInputChange($event)" //required
37
+ // @on-enter-click="onInputSubmit()"
38
+ // :errorMessage="Enter a number between 1 and 10"
39
+ // />
40
+ // question data example:
41
+ // question: {
42
+ // number_format_precision: 4,
43
+ // number_min_allowed: 0,
44
+ // number_max_allowed: 10,
45
+ // unit_short_name: "cm",
46
+ // },
47
+ import styled from "vue3-styled-components"
48
+ import {
49
+ stringToNumber,
50
+ numberToString,
51
+ } from "../../../helpers/numberConverter"
55
52
 
56
- const Container = styled.div`
57
- width: 100%;
58
- position: relative;
59
- `
53
+ const Container = styled.div`
54
+ width: 100%;
55
+ position: relative;
56
+ `
60
57
 
61
- const inputProps = {
62
- isError: Boolean,
63
- hasUnit: Boolean,
64
- inputWidth: String,
65
- hasLength: Boolean,
66
- }
67
- const InputContainer = styled('input', inputProps)`
68
- border: 1px solid
69
- ${(props) =>
70
- props.isError
71
- ? props.theme.colors.red
72
- : props.hasLength
73
- ? props.theme.colors.primary
74
- : props.theme.colors.mediumGray};
75
- padding: ${(props) =>
76
- props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
77
- border-radius: 4px;
78
- font-size: 16px;
79
- color: ${(props) =>
80
- props.isError ? props.theme.colors.red : props.theme.colors.primary};
81
- width: ${(props) => (props.inputWidth ? props.inputWidth : 'auto')};
58
+ const inputProps = {
59
+ isError: Boolean,
60
+ hasUnit: Boolean,
61
+ inputWidth: String,
62
+ hasLength: Boolean,
63
+ }
64
+ const InputContainer = styled("input", inputProps)`
65
+ border: 1px solid
66
+ ${(props) =>
67
+ props.isError
68
+ ? props.theme.colors.red
69
+ : props.hasLength
70
+ ? props.theme.colors.primary
71
+ : props.theme.colors.mediumGray};
72
+ padding: ${(props) =>
73
+ props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
74
+ border-radius: 4px;
75
+ font-size: 16px;
76
+ color: ${(props) =>
77
+ props.isError ? props.theme.colors.red : props.theme.colors.primary};
78
+ width: ${(props) => (props.inputWidth ? props.inputWidth : "auto")};
82
79
 
83
- &::placeholder {
84
- color: ${(props) =>
85
- props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
86
- }
80
+ &::placeholder {
81
+ color: ${(props) =>
82
+ props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
83
+ }
87
84
 
88
- &:focus {
89
- outline: none;
90
- }
91
- `
85
+ &:focus {
86
+ outline: none;
87
+ }
88
+ `
92
89
 
93
- const InputWrapper = styled.span`
94
- position: relative;
95
- `
90
+ const InputWrapper = styled.span`
91
+ position: relative;
92
+ `
96
93
 
97
- const UnitContainer = styled('span', inputProps)`
98
- border-left: 1px solid
99
- ${(props) =>
100
- props.isError
101
- ? props.theme.colors.red
102
- : props.hasLength
103
- ? props.theme.colors.primary
104
- : props.theme.colors.mediumGray};
105
- position: absolute;
106
- right: 10px;
107
- top: 0;
108
- padding-left: 10px;
109
- color: ${(props) =>
94
+ const UnitContainer = styled("span", inputProps)`
95
+ border-left: 1px solid
96
+ ${(props) =>
110
97
  props.isError
111
98
  ? props.theme.colors.red
112
99
  : props.hasLength
113
100
  ? props.theme.colors.primary
114
101
  : props.theme.colors.mediumGray};
115
- `
102
+ position: absolute;
103
+ right: 10px;
104
+ top: 0;
105
+ padding-left: 10px;
106
+ color: ${(props) =>
107
+ props.isError
108
+ ? props.theme.colors.red
109
+ : props.hasLength
110
+ ? props.theme.colors.primary
111
+ : props.theme.colors.mediumGray};
112
+ `
116
113
 
117
- const ErrorMessage = styled.div`
118
- font-size: 14px;
119
- color: ${(props) => props.theme.colors.red};
120
- padding-top: 16px;
121
- `
114
+ const ErrorMessage = styled.div`
115
+ font-size: 14px;
116
+ color: ${(props) => props.theme.colors.red};
117
+ padding-top: 16px;
118
+ `
122
119
 
123
- export default {
124
- name: 'InputNumberQuestion',
125
- components: {
126
- Container,
127
- InputContainer,
128
- InputWrapper,
129
- UnitContainer,
130
- ErrorMessage,
120
+ export default {
121
+ name: "input-number-question",
122
+ components: {
123
+ Container,
124
+ InputContainer,
125
+ InputWrapper,
126
+ UnitContainer,
127
+ ErrorMessage,
128
+ },
129
+ data() {
130
+ return {
131
+ textInput: "",
132
+ numberPrecision: 0, // we set this on created. By default is 0
133
+ minValue: 0,
134
+ maxValue: 100,
135
+ }
136
+ },
137
+ props: {
138
+ placeholder: {
139
+ required: false,
140
+ default: "",
141
+ },
142
+ isError: {
143
+ required: false,
144
+ default: false,
145
+ },
146
+ question: {
147
+ required: true,
131
148
  },
132
- props: {
133
- placeholder: {
134
- required: false,
135
- default: '',
136
- },
137
- isError: {
138
- required: false,
139
- default: false,
140
- },
141
- question: {
142
- required: true,
143
- },
144
- inputWidth: {
145
- required: false,
146
- default: null,
147
- },
148
- value: {
149
- required: true,
150
- default: null,
151
- },
152
- clearInput: {
153
- required: false,
154
- default: false,
155
- },
156
- errorMessage: {
157
- required: false,
158
- default: 'Please insert a correct number',
159
- },
149
+ inputWidth: {
150
+ required: false,
151
+ default: null,
160
152
  },
161
- data() {
162
- return {
163
- textInput: '',
164
- numberPrecision: 0, // we set this on created. By default is 0
165
- minValue: 0,
166
- maxValue: 100,
153
+ value: {
154
+ required: true,
155
+ default: null,
156
+ },
157
+ clearInput: {
158
+ required: false,
159
+ default: false,
160
+ },
161
+ errorMessage: {
162
+ required: false,
163
+ default: "Please insert a correct number",
164
+ },
165
+ },
166
+ methods: {
167
+ onChangeHandler($event) {
168
+ this.textInput = $event
169
+ let formattedValue = stringToNumber({
170
+ value: $event,
171
+ numberPrecision: this.numberPrecision,
172
+ })
173
+ if (isNaN(formattedValue)) {
174
+ this.textInput = ""
175
+ formattedValue = ""
167
176
  }
177
+ this.$emit("input-change", formattedValue)
168
178
  },
169
- watch: {
170
- clearInput: function (value) {
171
- if (value) {
172
- // If the value is typed, then we should clear the textInput on Continue
173
- this.textInput = ''
174
- }
175
- },
176
- question: function (value) {
177
- this.numberPrecision = value.number_format_precision
178
- this.minValue = value.number_min_allowed
179
- this.maxValue = value.number_max_allowed
180
- },
179
+ onInputBlur() {
180
+ let num = stringToNumber({
181
+ value: this.textInput,
182
+ numberPrecision: this.numberPrecision,
183
+ })
184
+ this.textInput = numberToString({
185
+ value: num,
186
+ numberPrecision: this.numberPrecision,
187
+ })
181
188
  },
182
- created() {
183
- this.numberPrecision = this.question.number_format_precision
184
- this.minValue = this.question.number_min_allowed
185
- this.maxValue = this.question.number_max_allowed
186
- if (this.value) {
187
- this.textInput = numberToString({
188
- value: this.value,
189
- numberPrecision: this.numberPrecision,
190
- })
189
+ },
190
+ created() {
191
+ this.numberPrecision = this.question.number_format_precision
192
+ this.minValue = this.question.number_min_allowed
193
+ this.maxValue = this.question.number_max_allowed
194
+ if (this.value) {
195
+ this.textInput = numberToString({
196
+ value: this.value,
197
+ numberPrecision: this.numberPrecision,
198
+ })
199
+ }
200
+ },
201
+ watch: {
202
+ clearInput: function (value) {
203
+ if (value) {
204
+ // If the value is typed, then we should clear the textInput on Continue
205
+ this.textInput = ""
191
206
  }
192
207
  },
193
- methods: {
194
- onChangeHandler($event) {
195
- this.textInput = $event
196
- let formattedValue = stringToNumber({
197
- value: $event,
198
- numberPrecision: this.numberPrecision,
199
- })
200
- if (isNaN(formattedValue)) {
201
- this.textInput = ''
202
- formattedValue = ''
203
- }
204
- this.$emit('input-change', formattedValue)
205
- },
206
- onInputBlur() {
207
- let num = stringToNumber({
208
- value: this.textInput,
209
- numberPrecision: this.numberPrecision,
210
- })
211
- this.textInput = numberToString({
212
- value: num,
213
- numberPrecision: this.numberPrecision,
214
- })
215
- },
208
+ question: function (value) {
209
+ this.numberPrecision = value.number_format_precision
210
+ this.minValue = value.number_min_allowed
211
+ this.maxValue = value.number_max_allowed
216
212
  },
217
- }
213
+ },
214
+ }
218
215
  </script>
@@ -1,7 +1,7 @@
1
- import InputText from './index.vue'
1
+ import InputText from "./index.vue"
2
2
 
3
3
  export default {
4
- title: 'InputText',
4
+ title: "InputText",
5
5
  component: InputText,
6
6
  // argTypes: {},
7
7
  }
@@ -32,44 +32,44 @@ const Template = (args, { argTypes }) => ({
32
32
 
33
33
  export const Default = Template.bind({})
34
34
  Default.args = {
35
- placeholder: 'Company name',
35
+ placeholder: "Company name",
36
36
  disabled: false,
37
- value: '',
38
- inputWidth: '200px',
39
- minWidth: '10ch',
40
- unitName: 'pc',
37
+ value: "",
38
+ inputWidth: "200px",
39
+ minWidth: "10ch",
40
+ unitName: "pc",
41
41
  isError: false,
42
- textAlign: 'left',
42
+ textAlign: "left",
43
43
  }
44
44
 
45
45
  export const hasError = Template.bind({})
46
46
  hasError.args = {
47
- placeholder: 'Enter Value',
48
- errorMessage: 'This field is required',
47
+ placeholder: "Enter Value",
48
+ errorMessage: "This field is required",
49
49
  isError: true,
50
50
  disabled: false,
51
- inputWidth: '200px',
51
+ inputWidth: "200px",
52
52
  }
53
53
 
54
54
  export const Disabled = Template.bind({})
55
55
  Disabled.args = {
56
- placeholder: 'Enter Value',
56
+ placeholder: "Enter Value",
57
57
  disabled: true,
58
- value: '',
59
- inputWidth: '200px',
58
+ value: "",
59
+ inputWidth: "200px",
60
60
  isError: false,
61
61
  }
62
62
 
63
63
  export const WithLabel = Template.bind({})
64
64
  WithLabel.args = {
65
- placeholder: 'Company name',
65
+ placeholder: "Company name",
66
66
  disabled: false,
67
- label: 'What is the best company in Switzerland?',
68
- value: 'Eturnity',
69
- inputWidth: '200px',
70
- unitName: 'pc',
67
+ label: "What is the best company in Switzerland?",
68
+ value: "Eturnity",
69
+ inputWidth: "200px",
70
+ unitName: "pc",
71
71
  isError: false,
72
- errorMessage: 'Maximum 5 characters',
73
- textAlign: 'left',
74
- alignItems: 'vertical',
72
+ errorMessage: "Maximum 5 characters",
73
+ textAlign: "left",
74
+ alignItems: "vertical",
75
75
  }