@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,138 +1,138 @@
1
1
  <template>
2
- <Wrapper ref="dropdown" :opening-mode="openingMode">
2
+ <wrapper ref="dropdown" :openingMode="openingMode">
3
3
  <WrapperButton @click="isOpenByClick = !isOpenByClick">
4
- <slot name="trigger"></slot>
4
+ <slot name="trigger" />
5
5
  </WrapperButton>
6
6
  <WrapperDropdown
7
- :background-color="backgroundColor"
8
7
  class="dropdown-content"
9
8
  :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
10
9
  :justify="justify"
11
10
  :position="position"
12
11
  :width="width"
12
+ :backgroundColor="backgroundColor"
13
13
  >
14
14
  <DropdownWindow
15
- :background-color="backgroundColor"
16
15
  :gap="gap"
16
+ :backgroundColor="backgroundColor"
17
17
  :width="width"
18
18
  >
19
- <slot name="dropdown"></slot>
19
+ <slot name="dropdown" />
20
20
  </DropdownWindow>
21
21
  </WrapperDropdown>
22
- </Wrapper>
22
+ </wrapper>
23
23
  </template>
24
24
 
25
25
  <script>
26
- // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
27
- // How to use:
28
- //<DropdownComponent
29
- // width="300px"
30
- // backgroundColor="red">
26
+ // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
27
+ // How to use:
28
+ //<DropdownComponent
29
+ // width="300px"
30
+ // backgroundColor="red">
31
31
 
32
- // <DropdownComponent/>
32
+ // <DropdownComponent/>
33
33
 
34
- import styled from 'vue3-styled-components'
34
+ import styled from 'vue3-styled-components'
35
35
 
36
- const wrapperAttrs = {
37
- width: String,
38
- backgroundColor: String,
39
- openingMode: String,
40
- gap: String,
41
- justify: String,
42
- }
43
- const Wrapper = styled('div', wrapperAttrs)`
44
- display: inline-block;
45
- position: relative;
36
+ const wrapperAttrs = {
37
+ width: String,
38
+ backgroundColor: String,
39
+ openingMode: String,
40
+ gap: String,
41
+ justify: String
42
+ }
43
+ const Wrapper = styled('div', wrapperAttrs)`
44
+ display: inline-block;
45
+ position: relative;
46
46
 
47
- &:hover .dropdown-content {
48
- ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
49
- }
50
- & .openDropdown {
51
- ${(props) =>
52
- props.openingMode == 'click' ? 'display:block !important' : ''}
53
- }
54
- `
55
- const WrapperDropdown = styled('div', wrapperAttrs)`
56
- margin-top: 0;
57
- display: none;
58
- position: absolute;
59
- z-index: 1;
60
- ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
61
- `
62
- const DropdownWindow = styled('div', wrapperAttrs)`
63
- width: ${(props) => props.width};
64
- background-color: ${(props) =>
65
- props.theme.colors[props.backgroundColor] || props.backgroundColor};
66
- margin-top: ${(props) => props.gap};
67
- border-radius: 4px;
68
- position: relative;
69
- min-width: 160px;
70
- box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
71
- z-index: 1;
72
- `
47
+ &:hover .dropdown-content {
48
+ ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
49
+ }
50
+ & .openDropdown {
51
+ ${(props) =>
52
+ props.openingMode == 'click' ? 'display:block !important' : ''}
53
+ }
54
+ `
55
+ const WrapperDropdown = styled('div', wrapperAttrs)`
56
+ margin-top: 0;
57
+ display: none;
58
+ position: absolute;
59
+ z-index: 1;
60
+ ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
61
+ `
62
+ const DropdownWindow = styled('div', wrapperAttrs)`
63
+ width: ${(props) => props.width};
64
+ background-color: ${(props) =>
65
+ props.theme.colors[props.backgroundColor] || props.backgroundColor};
66
+ margin-top: ${(props) => props.gap};
67
+ border-radius: 4px;
68
+ position: relative;
69
+ min-width: 160px;
70
+ box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
71
+ z-index: 1;
72
+ `
73
73
 
74
- const WrapperButton = styled('div', wrapperAttrs)`
75
- display: inline-block;
76
- `
74
+ const WrapperButton = styled('div', wrapperAttrs)`
75
+ display: inline-block;
76
+ `
77
77
 
78
- export default {
79
- name: 'DropdownComponent',
80
- components: {
81
- WrapperDropdown,
82
- WrapperButton,
83
- Wrapper,
84
- DropdownWindow,
78
+ export default {
79
+ name: 'DropdownComponent',
80
+ components: {
81
+ WrapperDropdown,
82
+ WrapperButton,
83
+ Wrapper,
84
+ DropdownWindow
85
+ },
86
+ props: {
87
+ width: {
88
+ required: false,
89
+ default: '300px'
85
90
  },
86
- props: {
87
- width: {
88
- required: false,
89
- default: '300px',
90
- },
91
- gap: {
92
- required: false,
93
- default: '10px',
94
- },
95
- position: {
96
- required: false,
97
- default: 'bottom',
98
- },
99
- justify: {
100
- required: false,
101
- default: 'left',
102
- },
103
- openingMode: {
104
- required: false,
105
- default: 'hover',
106
- },
107
- backgroundColor: {
108
- required: false,
109
- default: 'white',
110
- },
91
+ gap: {
92
+ required: false,
93
+ default: '10px'
111
94
  },
112
- data() {
113
- return {
114
- isOpenByClick: false,
115
- }
95
+ position: {
96
+ required: false,
97
+ default: 'bottom'
116
98
  },
117
- mounted() {
118
- document.addEventListener('click', this.clickOutside)
99
+ justify: {
100
+ required: false,
101
+ default: 'left'
119
102
  },
120
- beforeDestroy() {
121
- document.removeEventListener('click', this.clickOutside)
122
- },
123
- methods: {
124
- clickOutside(event) {
125
- if (this.openingMode != 'click') return
126
- if (
127
- this.$refs.dropdown &&
128
- (this.$refs.dropdown.$el == event.target ||
129
- this.$refs.dropdown.$el.contains(event.target))
130
- ) {
131
- return
132
- } else {
133
- this.isOpenByClick = false
134
- }
135
- },
103
+ openingMode: {
104
+ required: false,
105
+ default: 'hover'
136
106
  },
107
+ backgroundColor: {
108
+ required: false,
109
+ default: 'white'
110
+ }
111
+ },
112
+ data() {
113
+ return {
114
+ isOpenByClick: false
115
+ }
116
+ },
117
+ methods: {
118
+ clickOutside(event) {
119
+ if (this.openingMode != 'click') return
120
+ if (
121
+ this.$refs.dropdown &&
122
+ (this.$refs.dropdown.$el == event.target ||
123
+ this.$refs.dropdown.$el.contains(event.target))
124
+ ) {
125
+ return
126
+ } else {
127
+ this.isOpenByClick = false
128
+ }
129
+ }
130
+ },
131
+ mounted() {
132
+ document.addEventListener('click', this.clickOutside)
133
+ },
134
+ beforeDestroy() {
135
+ document.removeEventListener('click', this.clickOutside)
137
136
  }
137
+ }
138
138
  </script>
@@ -1,64 +1,64 @@
1
1
  <template>
2
- <ComponentWrapper>
3
- <TextOverlay :margin-top="marginTop">
2
+ <component-wrapper>
3
+ <text-overlay :marginTop="marginTop">
4
4
  <slot></slot>
5
- </TextOverlay>
6
- </ComponentWrapper>
5
+ </text-overlay>
6
+ </component-wrapper>
7
7
  </template>
8
8
 
9
9
  <script>
10
- // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
11
- //To use:
12
- // <error-message />
10
+ // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
11
+ //To use:
12
+ // <error-message />
13
13
 
14
- import styled from 'vue3-styled-components'
14
+ import styled from 'vue3-styled-components'
15
15
 
16
- const TextOverlay = styled('div', { marginTop: String })`
17
- position: absolute;
18
- top: calc(100% + ${(props) => props.marginTop});
19
- background: ${(props) => props.theme.colors.red};
20
- padding: 10px;
21
- width: max-content;
22
- max-width: 100%;
23
- min-width: min-content;
24
- font-size: 11px;
25
- font-weight: 400;
26
- border-radius: 4px;
27
- z-index: 999;
28
- color: ${(props) => props.theme.colors.white};
16
+ const TextOverlay = styled('div', { marginTop: String })`
17
+ position: absolute;
18
+ top: calc(100% + ${(props) => props.marginTop});
19
+ background: ${(props) => props.theme.colors.red};
20
+ padding: 10px;
21
+ width: max-content;
22
+ max-width: 100%;
23
+ min-width: min-content;
24
+ font-size: 11px;
25
+ font-weight: 400;
26
+ border-radius: 4px;
27
+ z-index: 999;
28
+ color: ${(props) => props.theme.colors.white};
29
29
 
30
- :before {
31
- content: '';
32
- background-color: ${(props) => props.theme.colors.red};
33
- position: absolute;
34
- top: 2px;
35
- left: 40px;
36
- height: 11px;
37
- width: 11px;
38
- transform-origin: center center;
39
- transform: translate(-2em, -0.5em) rotate(45deg);
40
- }
41
- `
30
+ :before {
31
+ content: '';
32
+ background-color: ${(props) => props.theme.colors.red};
33
+ position: absolute;
34
+ top: 2px;
35
+ left: 40px;
36
+ height: 11px;
37
+ width: 11px;
38
+ transform-origin: center center;
39
+ transform: translate(-2em, -0.5em) rotate(45deg);
40
+ }
41
+ `
42
42
 
43
- const ComponentWrapper = styled.div`
44
- display: block;
45
- `
43
+ const ComponentWrapper = styled.div`
44
+ display: block;
45
+ `
46
46
 
47
- export default {
48
- name: 'InfoText',
49
- components: {
50
- TextOverlay,
51
- ComponentWrapper,
52
- },
53
- props: {
54
- marginTop: {
55
- required: false,
56
- default: '13px',
57
- },
58
- },
59
- data() {
60
- return {}
61
- },
62
- methods: {},
47
+ export default {
48
+ name: 'info-text',
49
+ components: {
50
+ TextOverlay,
51
+ ComponentWrapper
52
+ },
53
+ props: {
54
+ marginTop: {
55
+ required: false,
56
+ default: '13px'
57
+ }
58
+ },
59
+ methods: {},
60
+ data() {
61
+ return {}
63
62
  }
63
+ }
64
64
  </script>