@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,138 +1,138 @@
1
1
  <template>
2
- <wrapper ref="dropdown" :openingMode="openingMode">
2
+ <Wrapper ref="dropdown" :opening-mode="openingMode">
3
3
  <WrapperButton @click="isOpenByClick = !isOpenByClick">
4
- <slot name="trigger" />
4
+ <slot name="trigger"></slot>
5
5
  </WrapperButton>
6
6
  <WrapperDropdown
7
+ :background-color="backgroundColor"
7
8
  class="dropdown-content"
8
9
  :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
9
10
  :justify="justify"
10
11
  :position="position"
11
12
  :width="width"
12
- :backgroundColor="backgroundColor"
13
13
  >
14
14
  <DropdownWindow
15
+ :background-color="backgroundColor"
15
16
  :gap="gap"
16
- :backgroundColor="backgroundColor"
17
17
  :width="width"
18
18
  >
19
- <slot name="dropdown" />
19
+ <slot name="dropdown"></slot>
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;
46
-
47
- &:hover .dropdown-content {
48
- ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
49
- }
50
- & .openDropdown {
51
- ${(props) =>
52
- props.openingMode == 'click' ? 'display:block !important' : ''}
36
+ const wrapperAttrs = {
37
+ width: String,
38
+ backgroundColor: String,
39
+ openingMode: String,
40
+ gap: String,
41
+ justify: String,
53
42
  }
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
- `
43
+ const Wrapper = styled('div', wrapperAttrs)`
44
+ display: inline-block;
45
+ position: relative;
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
+ `
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
85
- },
86
- props: {
87
- width: {
88
- required: false,
89
- default: '300px'
78
+ export default {
79
+ name: 'DropdownComponent',
80
+ components: {
81
+ WrapperDropdown,
82
+ WrapperButton,
83
+ Wrapper,
84
+ DropdownWindow,
90
85
  },
91
- gap: {
92
- required: false,
93
- default: '10px'
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
+ },
94
111
  },
95
- position: {
96
- required: false,
97
- default: 'bottom'
112
+ data() {
113
+ return {
114
+ isOpenByClick: false,
115
+ }
98
116
  },
99
- justify: {
100
- required: false,
101
- default: 'left'
117
+ mounted() {
118
+ document.addEventListener('click', this.clickOutside)
102
119
  },
103
- openingMode: {
104
- required: false,
105
- default: 'hover'
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
+ },
106
136
  },
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)
136
137
  }
137
- }
138
138
  </script>
@@ -1,64 +1,64 @@
1
1
  <template>
2
- <component-wrapper>
3
- <text-overlay :marginTop="marginTop">
2
+ <ComponentWrapper>
3
+ <TextOverlay :margin-top="marginTop">
4
4
  <slot></slot>
5
- </text-overlay>
6
- </component-wrapper>
5
+ </TextOverlay>
6
+ </ComponentWrapper>
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};
29
-
30
- :before {
31
- content: '';
32
- background-color: ${(props) => props.theme.colors.red};
16
+ const TextOverlay = styled('div', { marginTop: String })`
33
17
  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
-
43
- const ComponentWrapper = styled.div`
44
- display: block;
45
- `
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};
46
29
 
47
- export default {
48
- name: 'info-text',
49
- components: {
50
- TextOverlay,
51
- ComponentWrapper
52
- },
53
- props: {
54
- marginTop: {
55
- required: false,
56
- default: '13px'
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);
57
40
  }
58
- },
59
- methods: {},
60
- data() {
61
- return {}
41
+ `
42
+
43
+ const ComponentWrapper = styled.div`
44
+ display: block;
45
+ `
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: {},
62
63
  }
63
- }
64
64
  </script>