@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,224 +1,214 @@
1
1
  <template>
2
- <ComponentWrapper>
3
- <Container
4
- :background-color="backgroundColor"
5
- :check-color="checkColor"
6
- :cursor-type="cursorType"
7
- :has-label="label && !!label.length"
8
- :is-checked="isChecked"
9
- :is-disabled="isDisabled"
2
+ <component-wrapper>
3
+ <container
4
+ :checkColor="checkColor"
10
5
  :size="size"
6
+ :hasLabel="label && !!label.length"
7
+ :backgroundColor="backgroundColor"
8
+ :isChecked="isChecked"
9
+ :isDisabled="isDisabled"
10
+ :cursorType="cursorType"
11
11
  >
12
- <InputCheckbox
12
+ <input-checkbox
13
+ type="checkbox"
13
14
  :checked="isChecked"
14
15
  :data-id="dataId"
15
- type="checkbox"
16
16
  @change="onChangeHandler(!isChecked)"
17
17
  />
18
- <CheckWrapper :has-label="hasLabel">
18
+ <check-wrapper :hasLabel="hasLabel">
19
19
  <span class="checkmark"></span>
20
- </CheckWrapper>
21
- <LabelText v-if="label && !!label.length">
22
- {{ label }}
23
- </LabelText>
24
- </Container>
25
- </ComponentWrapper>
20
+ </check-wrapper>
21
+ <label-text v-if="label && !!label.length">{{ label }}</label-text>
22
+ </container>
23
+ </component-wrapper>
26
24
  </template>
27
25
 
28
26
  <script>
29
- // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
30
- //To use:
31
- // <checkbox
32
- // label="Do you accept the Terms?"
33
- // :isChecked="isChecked" //required
34
- // @on-event-handler="onInputChange($event)" //required
35
- // checkColor="blue"
36
- // size="small"
37
- // backgroundColor="red"
38
- // :isDisabled="true"
39
- // cursorType="default"
40
- // />
41
- import styled from 'vue3-styled-components'
27
+ // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
28
+ //To use:
29
+ // <checkbox
30
+ // label="Do you accept the Terms?"
31
+ // :isChecked="isChecked" //required
32
+ // @on-event-handler="onInputChange($event)" //required
33
+ // checkColor="blue"
34
+ // size="small"
35
+ // backgroundColor="red"
36
+ // :isDisabled="true"
37
+ // cursorType="default"
38
+ // />
39
+ import styled from 'vue3-styled-components'
42
40
 
43
- const ComponentWrapper = styled.div`
44
- min-height: 18px;
45
- `
41
+ const ComponentWrapper = styled.div`
42
+ min-height: 18px;
43
+ `
46
44
 
47
- const CheckWrapper = styled('div', { hasLabel: Boolean })`
48
- ${(props) =>
49
- props.hasLabel &&
50
- `
45
+ const CheckWrapper = styled('div', { hasLabel: Boolean })`
46
+ ${(props) =>
47
+ props.hasLabel &&
48
+ `
51
49
  display: flex;
52
50
  align-items: center;
53
51
  `}
54
- `
52
+ `
55
53
 
56
- const containerAttrs = {
57
- checkColor: String,
58
- size: String,
59
- hasLabel: Boolean,
60
- backgroundColor: String,
61
- isChecked: Boolean,
62
- isDisabled: Boolean,
63
- cursorType: String,
64
- }
65
- const Container = styled('label', containerAttrs)`
66
- display: grid;
67
- grid-template-columns: ${(props) =>
68
- props.hasLabel ? '16px auto' : '16px'};
69
- grid-gap: 16px;
70
- align-content: center;
71
- color: ${(props) => props.theme.colors.black};
72
- position: relative;
73
- cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
74
- font-size: 16px;
75
- user-select: none;
54
+ const containerAttrs = {
55
+ checkColor: String,
56
+ size: String,
57
+ hasLabel: Boolean,
58
+ backgroundColor: String,
59
+ isChecked: Boolean,
60
+ isDisabled: Boolean,
61
+ cursorType: String
62
+ }
63
+ const Container = styled('label', containerAttrs)`
64
+ display: grid;
65
+ grid-template-columns: ${(props) => (props.hasLabel ? '16px auto' : '16px')};
66
+ grid-gap: 16px;
67
+ align-content: center;
68
+ color: ${(props) => props.theme.colors.black};
69
+ position: relative;
70
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
71
+ font-size: 16px;
72
+ user-select: none;
76
73
 
77
- .checkmark {
78
- position: absolute;
79
- height: ${(props) =>
80
- props.size === 'medium'
81
- ? '25px'
82
- : props.size === 'small'
83
- ? '16px'
84
- : '25px'};
85
- width: ${(props) =>
86
- props.size === 'medium'
87
- ? '25px'
88
- : props.size === 'small'
89
- ? '16px'
90
- : '25px'};
91
- background-color: ${(props) =>
74
+ .checkmark {
75
+ position: absolute;
76
+ height: ${(props) =>
77
+ props.size === 'medium'
78
+ ? '25px'
79
+ : props.size === 'small'
80
+ ? '16px'
81
+ : '25px'};
82
+ width: ${(props) =>
83
+ props.size === 'medium'
84
+ ? '25px'
85
+ : props.size === 'small'
86
+ ? '16px'
87
+ : '25px'};
88
+ background-color: ${(props) =>
89
+ props.isChecked
90
+ ? props.backgroundColor
91
+ ? props.backgroundColor
92
+ : props.theme.colors.green
93
+ : props.isDisabled
94
+ ? props.theme.colors.lightGray
95
+ : props.theme.colors.white};
96
+ border-radius: 4px;
97
+ border: 1px solid
98
+ ${(props) =>
92
99
  props.isChecked
93
100
  ? props.backgroundColor
94
101
  ? props.backgroundColor
95
102
  : props.theme.colors.green
96
- : props.isDisabled
97
- ? props.theme.colors.lightGray
98
- : props.theme.colors.white};
99
- border-radius: 4px;
100
- border: 1px solid
101
- ${(props) =>
102
- props.isChecked
103
- ? props.backgroundColor
104
- ? props.backgroundColor
105
- : props.theme.colors.green
106
- : props.theme.colors.mediumGray};
103
+ : props.theme.colors.mediumGray};
107
104
 
108
- &:after {
109
- content: '';
110
- position: absolute;
111
- display: ${(props) => (props.isChecked ? 'block' : 'none')};
112
- }
105
+ &:after {
106
+ content: '';
107
+ position: absolute;
108
+ display: ${(props) => (props.isChecked ? 'block' : 'none')};
113
109
  }
110
+ }
114
111
 
115
- .checkmark:after {
116
- left: ${(props) =>
117
- props.size === 'medium'
118
- ? '9px'
119
- : props.size === 'small'
120
- ? '5px'
121
- : '9px'};
122
- top: ${(props) =>
123
- props.size === 'medium'
124
- ? '5px'
125
- : props.size === 'small'
126
- ? '2px'
127
- : '5px'};
128
- width: ${(props) =>
129
- props.size === 'medium'
130
- ? '5px'
131
- : props.size === 'small'
132
- ? '3px'
133
- : '5px'};
134
- height: ${(props) =>
135
- props.size === 'medium'
136
- ? '10px'
137
- : props.size === 'small'
138
- ? '6px'
139
- : '10px'};
140
- border: solid
141
- ${(props) =>
142
- props.checkColor ? props.checkColor : props.theme.colors.white};
143
- border-width: ${(props) =>
144
- props.size === 'medium'
145
- ? '0 3px 3px 0'
146
- : props.size === 'small'
147
- ? '0 2px 2px 0'
148
- : '0 3px 3px 0'};
149
- transform: rotate(45deg);
150
- }
151
- `
112
+ .checkmark:after {
113
+ left: ${(props) =>
114
+ props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
115
+ top: ${(props) =>
116
+ props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
117
+ width: ${(props) =>
118
+ props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
119
+ height: ${(props) =>
120
+ props.size === 'medium'
121
+ ? '10px'
122
+ : props.size === 'small'
123
+ ? '6px'
124
+ : '10px'};
125
+ border: solid
126
+ ${(props) =>
127
+ props.checkColor ? props.checkColor : props.theme.colors.white};
128
+ border-width: ${(props) =>
129
+ props.size === 'medium'
130
+ ? '0 3px 3px 0'
131
+ : props.size === 'small'
132
+ ? '0 2px 2px 0'
133
+ : '0 3px 3px 0'};
134
+ transform: rotate(45deg);
135
+ }
136
+ `
152
137
 
153
- const InputCheckbox = styled.input`
154
- cursor: pointer;
155
- position: absolute;
156
- opacity: 0;
157
- cursor: pointer;
158
- height: 0;
159
- width: 0;
160
- `
138
+ const InputCheckbox = styled.input`
139
+ cursor: pointer;
140
+ position: absolute;
141
+ opacity: 0;
142
+ cursor: pointer;
143
+ height: 0;
144
+ width: 0;
145
+ `
161
146
 
162
- const LabelText = styled.div`
163
- font-size: 13px;
164
- display: grid;
165
- align-items: flex-start;
166
- min-height: 18px;
167
- `
147
+ const LabelText = styled.div`
148
+ font-size: 13px;
149
+ display: grid;
150
+ align-items: flex-start;
151
+ min-height: 18px;
152
+ `
168
153
 
169
- export default {
170
- name: 'Checkbox',
171
- components: {
172
- ComponentWrapper,
173
- Container,
174
- InputCheckbox,
175
- LabelText,
176
- CheckWrapper,
154
+ export default {
155
+ name: 'checkbox',
156
+ components: {
157
+ ComponentWrapper,
158
+ Container,
159
+ InputCheckbox,
160
+ LabelText,
161
+ CheckWrapper
162
+ },
163
+ props: {
164
+ label: {
165
+ required: false,
166
+ default: ''
167
+ },
168
+ isChecked: {
169
+ required: true,
170
+ default: false
171
+ },
172
+ checkColor: {
173
+ required: false
174
+ },
175
+ size: {
176
+ required: false,
177
+ default: 'medium' // small, medium
177
178
  },
178
- props: {
179
- label: {
180
- required: false,
181
- default: '',
182
- },
183
- isChecked: {
184
- required: true,
185
- default: false,
186
- },
187
- checkColor: {
188
- required: false,
189
- },
190
- size: {
191
- required: false,
192
- default: 'medium', // small, medium
193
- },
194
- backgroundColor: {
195
- required: false,
196
- },
197
- isDisabled: {
198
- required: false,
199
- default: false,
200
- },
201
- dataId: {
202
- type: String,
203
- default: '',
204
- },
205
- cursorType: {
206
- type: String,
207
- default: 'pointer',
208
- },
179
+ backgroundColor: {
180
+ required: false
209
181
  },
210
- computed: {
211
- hasLabel() {
212
- return !!this.label.length
213
- },
182
+ isDisabled: {
183
+ required: false,
184
+ default: false
214
185
  },
215
- methods: {
216
- onChangeHandler(value) {
217
- if (this.isDisabled) {
218
- return
219
- }
220
- this.$emit('on-event-handler', value)
221
- },
186
+ dataId: {
187
+ type: String,
188
+ default: ''
222
189
  },
190
+ cursorType: {
191
+ type: String,
192
+ default: 'pointer'
193
+ }
194
+ },
195
+ computed: {
196
+ hasLabel() {
197
+ return !!this.label.length
198
+ }
199
+ },
200
+ computed: {
201
+ hasLabel() {
202
+ return !!this.label.length
203
+ }
204
+ },
205
+ methods: {
206
+ onChangeHandler(value) {
207
+ if (this.isDisabled) {
208
+ return
209
+ }
210
+ this.$emit('on-event-handler', value)
211
+ }
223
212
  }
213
+ }
224
214
  </script>
@@ -1,7 +1,7 @@
1
- import InputNumber from './index.vue'
1
+ import InputNumber from "./index.vue"
2
2
 
3
3
  export default {
4
- title: 'InputNumber',
4
+ title: "InputNumber",
5
5
  component: InputNumber,
6
6
  // argTypes: {},
7
7
  }
@@ -38,113 +38,113 @@ const Template = (args, { argTypes }) => ({
38
38
 
39
39
  export const Default = Template.bind({})
40
40
  Default.args = {
41
- placeholder: 'Enter Value',
41
+ placeholder: "Enter Value",
42
42
  disabled: false,
43
- value: '',
44
- inputWidth: '200px',
45
- minWidth: '150px',
46
- unitName: 'pc',
43
+ value: "",
44
+ inputWidth: "200px",
45
+ minWidth: "150px",
46
+ unitName: "pc",
47
47
  isError: false,
48
48
  numberPrecision: 0,
49
49
  noBorder: false,
50
- textAlign: 'left',
50
+ textAlign: "left",
51
51
  showLinearUnitName: false,
52
52
  }
53
53
 
54
54
  export const hasError = Template.bind({})
55
55
  hasError.args = {
56
- placeholder: 'Enter Value',
57
- errorMessage: 'This field is required',
56
+ placeholder: "Enter Value",
57
+ errorMessage: "This field is required",
58
58
  isError: true,
59
59
  disabled: false,
60
- inputWidth: '200px',
60
+ inputWidth: "200px",
61
61
  }
62
62
 
63
63
  export const Disabled = Template.bind({})
64
64
  Disabled.args = {
65
- placeholder: 'Enter Value',
65
+ placeholder: "Enter Value",
66
66
  disabled: true,
67
- value: '',
68
- inputWidth: '200px',
67
+ value: "",
68
+ inputWidth: "200px",
69
69
  isError: false,
70
70
  numberPrecision: 0,
71
71
  noBorder: false,
72
- textAlign: 'left',
72
+ textAlign: "left",
73
73
  showLinearUnitName: false,
74
74
  }
75
75
 
76
76
  export const LinearUnit = Template.bind({})
77
77
  LinearUnit.args = {
78
- placeholder: 'Enter Value',
78
+ placeholder: "Enter Value",
79
79
  disabled: false,
80
80
  value: 10,
81
- inputWidth: '200px',
82
- unitName: 'pc',
81
+ inputWidth: "200px",
82
+ unitName: "pc",
83
83
  isError: false,
84
84
  numberPrecision: 2,
85
85
  noBorder: false,
86
- textAlign: 'left',
86
+ textAlign: "left",
87
87
  showLinearUnitName: true,
88
88
  }
89
89
 
90
90
  export const NormalUnit = Template.bind({})
91
91
  NormalUnit.args = {
92
- placeholder: 'Enter Value',
92
+ placeholder: "Enter Value",
93
93
  disabled: false,
94
94
  value: 10,
95
- inputWidth: '200px',
96
- unitName: 'pc',
95
+ inputWidth: "200px",
96
+ unitName: "pc",
97
97
  isError: false,
98
98
  numberPrecision: 2,
99
99
  noBorder: false,
100
- textAlign: 'left',
100
+ textAlign: "left",
101
101
  showLinearUnitName: false,
102
102
  }
103
103
 
104
104
  export const WithLabel = Template.bind({})
105
105
  WithLabel.args = {
106
- placeholder: 'Enter Value',
106
+ placeholder: "Enter Value",
107
107
  disabled: false,
108
108
  value: 10,
109
- inputWidth: '200px',
110
- unitName: 'pc',
109
+ inputWidth: "200px",
110
+ unitName: "pc",
111
111
  isError: false,
112
112
  numberPrecision: 2,
113
113
  noBorder: false,
114
- textAlign: 'left',
114
+ textAlign: "left",
115
115
  showLinearUnitName: false,
116
- labelText: 'Number Input',
116
+ labelText: "Number Input",
117
117
  }
118
118
 
119
119
  export const WithLabelInfo = Template.bind({})
120
120
  WithLabelInfo.args = {
121
- placeholder: 'Enter Value',
121
+ placeholder: "Enter Value",
122
122
  disabled: false,
123
123
  value: 10,
124
- inputWidth: '200px',
125
- unitName: 'pc',
124
+ inputWidth: "200px",
125
+ unitName: "pc",
126
126
  isError: false,
127
127
  numberPrecision: 2,
128
128
  noBorder: false,
129
- textAlign: 'left',
129
+ textAlign: "left",
130
130
  showLinearUnitName: false,
131
- labelText: 'Number Input',
132
- labelInfoText: 'Here is some information for you...',
133
- labelInfoAlign: 'right',
131
+ labelText: "Number Input",
132
+ labelInfoText: "Here is some information for you...",
133
+ labelInfoAlign: "right",
134
134
  }
135
135
 
136
136
  export const LargerFont = Template.bind({})
137
137
  LargerFont.args = {
138
- placeholder: 'Enter Value',
138
+ placeholder: "Enter Value",
139
139
  disabled: false,
140
140
  value: 10,
141
- inputWidth: '200px',
142
- unitName: 'pc',
141
+ inputWidth: "200px",
142
+ unitName: "pc",
143
143
  isError: false,
144
144
  numberPrecision: 2,
145
145
  noBorder: false,
146
- textAlign: 'left',
146
+ textAlign: "left",
147
147
  showLinearUnitName: false,
148
- labelText: 'Number Input',
149
- fontSize: '16px',
148
+ labelText: "Number Input",
149
+ fontSize: "16px",
150
150
  }